parents ul li assez compliqué [Résolu]

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 !!!!!

04/01/2011, 12h24	#3
gianni7033 Nouveau Membre du Club Inscription : juillet 2009 Messages : 110 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 110 Points : 37 Points : 37	ça fonctionne ! super big merci comme toujours, ce forum a encore de longue année devant lui avec des modérateurs aussi compétant !!!!!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email