Jquery $ (this) Enfant Sélecteur

Question

J'utilise ceci sur une page:

jQuery('.class1 a').click(function() { 
    if ($(".class2").is(":hidden")) { 
    $(".class2").slideDown("slow"); 
    } else { 
    $(".class2").slideUp(); 
    } 
}); 

Avec une structure dans la page plus tard qui va comme ceci:

<div class="class1"> 
    <a href="...">text</a> 
    <div class="class2">text</div> 
</div> 

Cela fonctionne très bien, sauf si vous avez des ensembles multipule Class1/classe2 comme ceci:

<div class="class1"> 
    <a href="...">text</a> 
    <div class="class2">text</div> 
</div> 
<div class="class1"> 
    <a href="...">text</a> 
    <div class="class2">text</div> 
</div> 
<div class="class1"> 
    <a href="...">text</a> 
    <div class="class2">text</div> 
</div> 

Comment puis-je modifier le code jquery initial afin qu'il affecte que la classe2 sous la classe actuelle1 qui a été cliqué? J'ai essayé des variations de ce qui a été recommandé sur cette page: How to get the children of the $(this) selector? mais havent Gotten pour travailler encore

Answer 1

La meilleure façon avec le code HTML que vous avez serait probablement d'utiliser la fonction next, comme ceci:

var div = $(this).next('.class2'); 

Étant donné que le gestionnaire de clic arrive au <a>, vous pouvez également passer au DIV parent, puis rechercher le second DIV. Vous le feriez avec une combinaison de parent et children. Cette approche serait mieux si le code HTML que vous mettez en place est pas exactement comme ça et la deuxième DIV pourrait être dans un autre emplacement par rapport au lien:

var div = $(this).parent().children('.class2'); 

Si vous vouliez la « recherche » de ne pas se limiter à immédiate enfants, vous devez utiliser find au lieu de children dans l'exemple ci-dessus.

De même, il est toujours préférable de préfixer vos sélecteurs de classe avec le nom du tag si possible. c'est-à-dire, si seulement les étiquettes <div> vont avoir ces classes, faites le sélecteur être div.class1, div.class2.

Answer 2

http://jqapi.com/ Traversant -> Arbre Traversal -> Enfants

Answer 3

En cas de clic "ce" est la balise qui a été cliqué

jQuery('.class1 a').click(function() { 
    var divToSlide = $(this).parent().find(".class2"); 
    if (divToSlide.is(":hidden")) { 
     divToSlide.slideDown("slow"); 
    } else { 
     divToSlide.slideUp(); 
    } 
}); 

Il y a plusieurs façons d'arriver à la div si vous pouvez également utiliser .siblings, .next etc

Answer 4

Ceci est beaucoup plus simple avec .slideToggle():

jQuery('.class1 a').click(function() { 
    $(this).next('.class2').slideToggle(); 
}); 

EDIT: il fait .next au lieu de .siblings

http://www.mredesign.com/demos/jquery-effects-1/

Vous pouvez également ajouter des cookies de se rappeler où vous êtes ...

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/