Sélectionner les divisions cachées

**_concept_** · 23/07/2010, 19h17

Bonjour à tous,
je vous expose mon problème par un exemple, j'ai le code HTML suivant :

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
 
<div>
   <ul>
	<li> A </li>
	<li> B </li>
	<li> C </li>
   </ul>
</div>
 
<div style="display: none;">
	AAA
</div>
 
<div style="display: none;">
	BBB
</div>

J'aimerais qu'en cliquant sur l'une des balises <li> mon code JS fasse apparaitre les <div> invisibles.
J'ai donc codé ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("div ul li").click(
	function()
	{
		$(this).parent().parent().each(
			function()
			{
				$(this).show();
			}
		);
 
	}
);

Bien sur ça ne marche pas.
Je précise qu'il est important de passer par $(this) car en réalité je travaille avec des classes et des parties de codes similaire, exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="a">
   <ul>
        <li> </li>
   </ul>
</div>
 
<div class="a">
   <ul>
        <li> </li>
   </ul>
</div>

et il est donc important de cibler la partie de code cliquée.
Ne me proposez donc pas de faire ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("div ul li").click(
	function()
	{
		$("div").each(
			function()
			{
				$(this).show();
			}
		);
 
	}
);

Merci pour vos réponses.

**SpaceFrog** · 23/07/2010, 19h48

si tu cherches a afficher les divs en display none a partir des li, normal le lien relatif n'est pas parent.parent ...

**eckerdecker** · 23/07/2010, 19h59

Bonjour,

Deux choses :

1/ je ne comprends pas ce que tu veux afficher, plus exactement je ne comprends pas si cliquer sur un li particulier doit afficher un div particulier ou si peut importe le li tu affiches tous les divs (mais lesquels ??). Ça manque d'id et de class ton exemple, tu dis qu'il y en a, il me semble important de les mettre pour bien comprendre.

2/ quand tu remontes par le biais de la méthode parent() tu fais ce chemin :

Code :

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

1
2
3
4
$(this) // <li>
.parent() // <ul>
.parent() // <div>
.each() // ...

... tu t'apprêtes à parcourir un tableau de ... 1 élément : le <div> autour de ta <ul> et qui est bien sûr déjà visible. Il te manque un .nextAll() avant ton .each(). Je dirai même que tu peux remplacer par :

Code :

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

$(this).parents('div:eq(0)').nextAll().show();

Si ça règle ton problème tant mieux, sinon montre nous un exemple sans enlever les class et les id, et qui comporte un niveau de plus au dessus de

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
<div>
   <ul>
	<li> A </li>
	<li> B </li>
	<li> C </li>
   </ul>
</div>
 
<div style="display: none;">
	AAA
</div>
 
<div style="display: none;">
	BBB
</div>

**_concept_** · 23/07/2010, 20h24

Puissant le nextAll(), ça marche bien

Mais si je continu sur mes parent() et mon each() (j'aimerais bien comprendre plus en détail leur fonctionnement) si je te suis :

Code :

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

1
2
3
4
5
$(this) // <li>
.parent() // <ul>
.parent() // <div>
.parent() // <body>
.each() // ...

Une fois revenu jusqu'a la balise <body> contenant bien mes 3 <div>, de quelle façon puis-je les afficher grâce au each() ?
(Appuyer sur n'importe quel <li> fait apparaitre tous les <div>, j'aurais pas du mettre le même nombre de ces 2 balises, c'est vrai que c'était confus).
Merci pour vos réponses.

**eckerdecker** · 23/07/2010, 20h31

quoi qu'il en soit faire .parent().each() n'a pas de sens :
.parent() te retourne un et un seul élément : l'élément directement parent. Donc faire un .each() dessus ne sert à rien, tu n'a qu'un élément à parcourir. Si tu fais des .parent() jusqu'à remonter au body tu peux le faire suivre d'un sélecteur simple .('div') par exmple mais dans ce cas autant faire directement $('div')

**_concept_** · 23/07/2010, 20h45

Hum dac, je pensais qu'en remontant dans la balise englobante, on pouvais avoir accès à chacun des balises enfants directes qu'elle contenait...
Dis moi, le parents() également m'a été bien utile, mais d'après la doc il n'existe pas son contraire : childrens(). Comment faire alors pour trouver une balise enfant non directe (plusieurs fois englobées) ?
Merci

**eckerdecker** · 23/07/2010, 20h50

.find()

**_concept_** · 23/07/2010, 20h52

Arf je le savais, je l'ai déjà utilisé...
On devient vraiment assisté quand on obtient de bonnes réponses sur un forum.
Merci pour tout, adios.

**Watilin** · 24/07/2010, 02h48

Je suggère de sélectionner seulement les div masquées pour être plus efficace :

Code jQuery :

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

$('div:hidden').show();

**danielhagnoul** · 27/07/2010, 01h21

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 * Il est important de limiter l'effet,
 * sinon on sélectionnera toutes les
 * divisions cachées.
 */
$("li").click(function(){
	$(this).parents("div").nextAll("div:hidden").each(function(i, item){
		// on traite 0 et 1
		if ( i < 2) {
			$(item).css("display","block");
		}
	});
});

Sélectionner les divisions cachées

jQuery

Discussions similaires

Partager

Partager