Discussion :

[black-hawk-down]

Bonjour,

Comme l'indique le titre je cherche à simplifier mon Javascript qui récupére la valeur de l'enfant du n-ième parent.

Voici ma structure (accordion jquery ui) :

Code html :

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
<div id="accordion">
	<h3><a href="#">PHOTOS</a><span><img src="" alt="" title=""></span></h3>
	<div>
		<div>...</div>
		<div>
			<button>Récupère ma valeur (PHOTOS)</button>
		</div>
	</div>
 
	<h3><a href="#">VIDEOS</a><span><img src="" alt="" title=""></span></h3>
	<div>
		<div>...</div>
		<div>
			<button>Récupère ma valeur (VIDEOS)</button>
		</div>
	</div>
</div>

J'arrive à récupérer le texte en faisant ceci :

Code :

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

1
2
3
4
$('button').click(function() {
	var ancetre = $(this).parent().parent().parent();
	alert($(ancetre).children('h3').find('a').html());
});

Mais je pense qu'il doit y avoir plus simple.

Si vous avez des pistes, n'hésitez pas à partager

Tcho

[danielhagnoul]

parents() http://api.jquery.com/parents/

[Bovino]

Si je comprends ta demande, tu cherches à partir des balises <button> à remonter de deux <div>, trouver le <h3> précédent et obtenir le contenu du lien qui s'y trouve, c'est ça ?

Si c'est ça, ta méthode n'est effectivement pas idéale puisque déjà, tu remontes un cran trop haut (div#accordion) et du coup, tu perds le rang de l'élément cliqué.
Tu as différentes solutions selon moi.
1) Ajouter une classe commune aux div suivant les <h3>, par exemple "ref" :

Code html :

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
<div id="accordion">
	<h3><a href="#">PHOTOS</a><span><img src="" alt="" title=""></span></h3>
	<div class="ref">
		<div>...</div>
		<div>
			<button>Récupère ma valeur (PHOTOS)</button>
		</div>
	</div>
 
	<h3><a href="#">VIDEOS</a><span><img src="" alt="" title=""></span></h3>
	<div class="ref">
		<div>...</div>
		<div>
			<button>Récupère ma valeur (VIDEOS)</button>
		</div>
	</div>
</div>

tu peux ensuite remonter directement jusqu'à celle qui correspond au bouton, puis retrouver les autres éléments :

Code :

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

1
2
3
$('button').click(function() {
    console.log($(this).closest('.ref').prev('h3').find('a').html());
}

mais bon, comme tu le vois, ça reste assez lourd comme syntaxe...

Le mieux serait, si c'est possible, d'utiliser les attributs data-*. Tu pourras soit indiquer sur chaque bouton son rang par exemple :

Code html :

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

<button data-rang="0">Récupère ma valeur (PHOTOS)</button>

et utiliser cette info pour retrouver plus facilement le bon lien

Code :

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

1
2
3
$('button').click(function() {
    console.log($('#accordion h3 a').eq($(this.data('rang')).html());
}

ou mieux, ajouter une classe ou un id correspondant au rang en question :

Code html :

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
<div id="accordion">
	<h3><a href="#" id="lien0">PHOTOS</a><span><img src="" alt="" title=""></span></h3>
	<div>
		<div>...</div>
		<div>
			<button data-lien="lien0">Récupère ma valeur (PHOTOS)</button>
		</div>
	</div>
 
	<h3><a href="#" id="lien1">VIDEOS</a><span><img src="" alt="" title=""></span></h3>
	<div>
		<div>...</div>
		<div>
			<button data-lien="lien1">Récupère ma valeur (VIDEOS)</button>
		</div>
	</div>
</div>

Code :

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

1
2
3
$('button').click(function() {
    console.log($('#' + $(this.data('lien')).html());
}

[SpaceFrog]

http://jsfiddle.net/xafVL/

[black-hawk-down]

Merci pour vos réponses.

@Bovino : tu as très bien cerné le problème. Je reviens juste sur le premier point que tu soulève, je devais bien remonter de trois parents pour ensuite aller dans le h3. Ou alors nous ne comptons pas à partir de la même origine ?

@SpaceFrog : je ne saisis pas le sens de .parents('div:eq(1)'). Tu peux m'en dire plus sur cette notation ?

J'opte pour la solution n°2 (date-*) de Bovino qui est plus propre. Je n'avais pas pensé à un système de ce genre.

Encore merci à vous trois.


Edit : @Bovino : il y a une petite coquille dans la syntaxe de récupération, c'est : $('#' + $(this).data('lien')).html() au lieu de $('#' + $(this.data('lien')).html()

[Bovino]

je devais bien remonter de trois parents pour ensuite aller dans le h3

Bah... ça dépend (ça dépasse, forcément ).
Depuis le bouton, tu remontes d'un niveau pour atteindre la div englobant le bouton, d'un deuxième niveau pour atteindre la div qui se situe après le titre h3 et si tu remontes d'un troisième niveau, tu atteins la div #accordion et là, tu perds la position du bouton cliqué.
Donc en remontant de deux niveaux puis en cherchant le h3 précédent, c'est plus efficace.
Enfin, en tout état de cause, l'utilisation de data-* me semble beaucoup plus appropriée et jQuery facilite grandement leur utilisation.

EDIT : oui, bien vu la coquille !

[black-hawk-down]

Ok, je comprends mieux pourquoi il faut remonter de deux et non de trois. C'est noté.

Merci.

[SpaceFrog]

.parents('div:eq(1)')

parents remonte la hierarchie des tags selon le selecteur
je remonte donc la hierarchie des divs et je prends le second div parent eq(1) ( eq(0) étant le premier )