parents ul li assez compliqué

**gianni7033** · 04/01/2011, 00h50

Bonjour à tous,

je coince fortement sur un problème de hiérarchie.

J'ai créé une TREEVIEW avec des <ul> <li>.
Pour ceux qui ne savent ce qu'est une TREEVIEW c'est tout simplement lorsque qu'on veut créer des groupes, sous groupes, sous sous groupes indéfinément sans limite d'enfants.

Ma hiérarchi est constitué de <ul> qui contiennent des <li><span>.

Voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="root">
<li><span>Le root</span>
  <ul>
  <li><span>GROUPE A</span><ul><li><span>GROUPE AA</span></li></ul>
  </li>
  </ul>

  <ul>
  <li><span>GROUPE B</span><ul><li><span>GROUPE BB</span>
  <ul><li><span id="mon_groupe">GROUPE BBB</span></li></ul>
</li></ul>
  </li>
  </ul>


</li>
</ul>

Ce qui précède correspond donc hiérarchiquement à :

LE ROOT
GROUPE A GROUPE AA
GROUPE B GROUPE BB GROUPE BBB

Ce que je veux faire est simple :

retrouver le texte des parents de GROUPE BBB donc de l'id mon_groupe, pour afficher :

LE ROOT > GROUPE B > GROUPE BB > GROUPE BBB

J'ai essayé d'utiliser les fonctions parent, parents, parentsUntil, closests, avec les paremètres ul>li>span et :first, mais je dois surement mal les utiliser ...

Quelqu'un à une idée pour retrouver cette hiérarchie tant cherché ?

**SpaceFrog** · 04/01/2011, 08h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(document).ready(function(){
    var train=new Array()
    $('#mon_groupe').parents('li').each(function(){
    	train.push( $(this).children('span').eq(0).html())
    	})
    alert(train.reverse().join(' >'))	
 
});
</script>
</head>
<body>
<li><span>Le root</span>
  <ul>
  <li><span>GROUPE A</span><ul><li><span>GROUPE AA</span></li></ul>
  </li>
  </ul>
 
  <ul>
  <li><span>GROUPE B</span><ul><li><span>GROUPE BB</span>
  <ul><li><span id="mon_groupe">GROUPE BBB</span></li></ul>
</li></ul>
  </li>
  </ul>
 
 
</li>
</ul>

et de façon généralisée sur le click du span:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
 
function tree(obj){
var train=new Array()
    obj.parents('li').each(function(){
    	train.push( $(this).children('span').eq(0).html())
    	})
    alert(train.reverse().join(' > '))	
    }
 
$(document).ready(function(){
    $('span').click( function(){tree( $(this) )})
});
</script>
</head>
<body>
<li><span>Le root</span>
  <ul>
  <li><span>GROUPE A</span><ul><li><span>GROUPE AA</span></li></ul>
  </li>
  </ul>
 
  <ul>
  <li><span>GROUPE B</span><ul><li><span>GROUPE BB</span>
  <ul><li><span id="mon_groupe">GROUPE BBB</span></li></ul>
</li></ul>
  </li>
  </ul>
 
 
</li>
</ul>
 
</body>
 
</html>

**gianni7033** · 04/01/2011, 12h24

ça fonctionne !

super big merci comme toujours, ce forum a encore de longue année devant lui avec des modérateurs aussi compétant !!!!!

parents ul li assez compliqué

jQuery

Vue hybride

Discussions similaires

Partager

Partager