Récupération de noeuds parents dans une liste [Résolu]

Novac · 21/09/2011, 13h21

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, 13h33

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, 14h15

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, 15h05

parents()

Novac · 21/09/2011, 15h46

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, 16h07

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, 16h19

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, 16h35

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, 16h39

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, 16h48

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, 16h59

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, 17h07

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

21/09/2011, 13h33	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	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() __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

21/09/2011, 14h15	#3
Novac Invité régulier Étudiant Inscription : septembre 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Secteur : Enseignement Informations forums : Inscription : septembre 2011 Messages : 19 Points : 5 Points : 5	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é!
	00

21/09/2011, 15h05	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	parents() __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

21/09/2011, 16h39	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

21/09/2011, 16h48	#10
Novac Invité régulier Étudiant Inscription : septembre 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Secteur : Enseignement Informations forums : Inscription : septembre 2011 Messages : 19 Points : 5 Points : 5	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.
	00

21/09/2011, 17h07	#12
Novac Invité régulier Étudiant Inscription : septembre 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Secteur : Enseignement Informations forums : Inscription : septembre 2011 Messages : 19 Points : 5 Points : 5	Merci SpaceFrog, ça fonctionne du tonnerre et tu m'enlève une grosse épine du pied. Encore Merci!
	00

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