Récupération de noeuds parents dans une liste

**Novac** · 21/09/2011, 14h21

Bonjour à toutes et à tous.
Je vous expose mon problème : je construis dynamiquement une liste grâce à mes données issues de ma BDD Mysql.
Cette liste se présente de la manière suivante :

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
<ul>
	<li id="1">
		  <span>Aliments</span>
		<ul>
			<li id="2"><span>Fruits</span>
				<ul>
					<li id="3"><span>Bananes</span></li>
					<li id="4"><span>Oranges</span></li>
					<li id="5"><span>Raisins</span></li>
				</ul>
			</li>
			<li id="6">
				<span>Viandes</span>
				<ul>
					<li id="7"><span>Boeuf</span></li>
					<li id="8"><span>Dinde</span></li>
					<li id="9"><span>Porc</span></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Mon problème c'est que je n'arrive pas à créer une fonction en Jquery, qui me permettrai en sélectionnant un Span de récupérer les noeuds parents de celui-ci.

Exemple : Si je sélectionnais le span "dinde" je souhaiterai récupérer un array contenant {Aliments,Viandes, Dinde}
Si je sélectionnais le span "Viandes" je souhaiterai récupérer un array contenant {Aliments,Viandes}

Si quelqu'un avait une idée de la manière de procéder je serai vraiment ravi de la connaître.
D'avance Merci!

**SpaceFrog** · 21/09/2011, 14h33

ne JAMAIS utiliser des id uniquement numérique ni commençant par du numérique ...

ensuite une fois les modifications faites tu trouveras ton salut dans

Code :

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

parents()

**Novac** · 21/09/2011, 15h15

Salut spaceFrog, merci pour ta réponse si rapide mais n'aurais-tu pas un exemple de code car j'ai déjà essayer cette methode parent() mais ça n'a pas fonctionné!

**SpaceFrog** · 21/09/2011, 16h05

parents()

**Novac** · 21/09/2011, 16h46

SpaceFrog, voici ce que j'utilise :

Code :

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

1
2
3
4
5
6
 
	$("#liste span").live('click', function(e) { 
		e.preventDefault; 
		alert($(this).parents().attr('id'));
 
	});

Mais ça ne fonctionne pas!! Ca me renvoie l'id de l'élément sélectionné et non ceux de ses parents. Et de plus, ce que je cherche à avoir ce n'est pas leurs identifiants mais bien le texte compris dans le span de chacun des li parents. Mais là je ne vois vraiment pas comment faire!!

**SpaceFrog** · 21/09/2011, 17h07

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
<script type="text/javascript">
$(function(){
 
$("#liste span").click( function() { 
		var liste=""
		$(this).parents().each( function(){ liste+=($(this).attr("id"))?($(this).attr("id"))+'\n':''});
 		alert(liste)
	});
})
</script>
</head>
<body >
<ul id="liste">
	<li id="_1">
		  <span>Aliments</span>
		<ul>
			<li id="_2"><span>Fruits</span>
				<ul>
					<li id="_3"><span>Bananes</span></li>
					<li id="_4"><span>Oranges</span></li>
					<li id="_5"><span>Raisins</span></li>
				</ul>
			</li>
			<li id="_6">
				<span>Viandes</span>
				<ul>
					<li id="_7"><span>Boeuf</span></li>
					<li id="_8"><span>Dinde</span></li>
					<li id="_9"><span>Porc</span></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

**SpaceFrog** · 21/09/2011, 17h19

ou

Code :

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

1
2
3
4
5
$("#liste span").click( function() { 
		var liste=new Array()
		$(this).parents().each( function(){ ($(this).attr("id"))?liste.push($(this).attr("id")):'' });
		 		alert(liste.reverse().join('\n'))
	});

ou de façon plus lisible pour le controle

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
 
<script type="text/javascript">
$(function(){
 
$("#liste_generale span").click( function() { 
		var liste=new Array()
		$(this).parents().each( function(){ ($(this).attr("id"))?liste.push($(this).attr("id")):'' });
		 		alert(liste.reverse().join('\n'))
	});
})
</script>
</head>
<body >
<ul id="liste_generale">
	<li id="Aliments">
		  <span>Aliments</span>
		<ul>
			<li id="Fruits"><span>Fruits</span>
				<ul>
					<li id="_3"><span>Bananes</span></li>
					<li id="_4"><span>Oranges</span></li>
					<li id="_5"><span>Raisins</span></li>
				</ul>
			</li>
			<li id="Viandes">
				<span>Viandes</span>
				<ul>
					<li id="_7"><span>Boeuf</span></li>
					<li id="_8"><span>Dinde</span></li>
					<li id="_9"><span>Porc</span></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

**Novac** · 21/09/2011, 17h35

Merci SpaceFrog car grâce à toi je commence à bien avancer sur mon problème. En effet, en ayant un peu modifié ton code :

Code :

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

1
2
3
4
5
6
$("#liste span").live('click', function(e) { 
		e.preventDefault; 
		var liste=""
		$(this).parents('li').each( function(){ liste+=($(this).attr("id"))?($(this).attr("id"))+'\n':''});
 		alert(liste)
});

J'obtiens les identifiants de mes li dans le désordre. Mais ce que je souhaite c'est récupérer les textes contenus dans les spans!

Et pourrais-tu m'expliquer la ligne suivante :

Code :

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

		$(this).parents('li').each( function(){ liste+=($(this).attr("id"))?($(this).attr("id"))+'\n':''});

Car je ne la comprend pas à partir du ?

En tout cas merci de prendre de ton temps pour m'expliquer les choses, c'est vraiment sympa!

**SpaceFrog** · 21/09/2011, 17h39

Code :

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

liste+=($(this).attr("id"))?($(this).attr("id"))+'\n':''

operateur ternaire

(condition)? si oui : si non

si l'objet parent possède un id, je l'ajoute à liste suivi d'un \n

**Novac** · 21/09/2011, 17h48

Ah OK j'avais jamais utilisé cet opérateur et son utilisation est vraiment simple. Par contre il ne me manque plus qu'un petit truc, c'est comment récupérer le texte des span et non les id des li?

Pour inverser l'ordre c'est bon car j'ai déclarer la variable liste en tant que tableau et j'utilise la methode reverse() pour tout inverser.

**SpaceFrog** · 21/09/2011, 17h59

Code :

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

1
2
3
	var liste=new Array()
		$(this).parents().each( function(){     ($(this).children('span').length)? liste.push( $(this).children('span:eq(0)').html()) :'' });
		 		alert(liste.reverse().join('\n'))

**Novac** · 21/09/2011, 18h07

Merci SpaceFrog, ça fonctionne du tonnerre et tu m'enlève une grosse épine du pied. Encore Merci!

Récupération de noeuds parents dans une liste

jQuery

Discussions similaires

Partager

Partager