web-dev-qa-db-fra.com

Jquery $ (this) Sélecteur d'enfants

J'utilise ceci:

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

Sur la structure de la page:

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

Cela ne fonctionne que lorsque vous n'avez pas plusieurs ensembles class1/class2 comme:

<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 modifier le code jquery initial afin qu'il n'affecte que class2 sous le class1 sur lequel vous avez cliqué? J'ai essayé les recommandations de Comment obtenir les enfants du sélecteur $ (this)? mais n'ai pas réussi.

jquerycss-selectorschildren
67
Orbalon

Le meilleur moyen d'utiliser 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 clics est présent sur le <a>, Vous pouvez également aller jusqu'au DIV principal, puis rechercher le deuxième DIV. Vous feriez cela avec une combinaison de parent et children . Cette approche serait préférable si le code HTML que vous avez mis en place ne correspond pas exactement à cela et que la deuxième DIV pourrait se trouver à un autre emplacement par rapport au lien:

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

Si vous souhaitez que la "recherche" ne soit pas limitée aux enfants immédiats, vous devez utiliser find au lieu de children dans l'exemple ci-dessus.

En outre, il est toujours préférable d’ajouter le nom de l’étiquette à vos sélecteurs de classe, dans la mesure du possible. Autrement dit, si seules les balises <div> doivent avoir ces classes, définissez le sélecteur sur div.class1, div.class2.

88
Paolo Bergantino

Dans l'événement click "this" est la balise sur laquelle l'utilisateur a 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 de se rendre à la div, mais vous pouvez aussi utiliser .siblings, .next etc.

7
John Foster

C'est beaucoup plus simple avec . SlideToggle () :

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

EDIT: fait .next au lieu de .siblings

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

Vous pouvez également ajouter des cookies pour vous rappeler où vous vous trouvez ...

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

7
Steve Perks

http://jqapi.com/ Traversée -> Traversée des arbres -> Enfants

5
Simple Nick