Jquery $ (this) Child Selector

Ich benutze dies:

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

Auf der Seitenstruktur:

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

Es funktioniert nur, wenn Sie nicht mehrere Klassen1 / Klasse2-Sets haben, wie:

<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>

Wie ändere ich den anfänglichen JQuery-Code so, dass er nur Klasse2 unter der Klasse1 betrifft, auf die geklickt wurde? Ich habe Empfehlungen von Wie bekomme ich die Kinder des $ (this) Selektors? aber es ist mir nicht gelungen.

Der beste Weg mit dem HTML, das Sie haben, wäre wahrscheinlich, die nextFunktion wie folgt zu verwenden:

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

Da der Klick-Handler mit dem passiert <a>, können Sie auch zum übergeordneten DIV wechseln und dann nach dem zweiten DIV suchen. Sie würden dies mit einer Kombination von parentund tun children. Dieser Ansatz ist am besten geeignet, wenn der von Ihnen erstellte HTML-Code nicht genau so ist und sich der zweite DIV an einer anderen Stelle relativ zum Link befinden könnte:

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

Wenn Sie möchten, dass die "Suche" nicht auf unmittelbare Kinder beschränkt ist, verwenden Sie findstatt childrenim obigen Beispiel.

Außerdem ist es immer am besten, Ihren Klassenselektoren nach Möglichkeit den Tag-Namen voranzustellen. dh wenn nur <div>Tags diese Klassen haben sollen, machen Sie den Selektor zu div.class1, div.class2.

Im Klickereignis ist "dies" das Tag, auf das geklickt wurde

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

Es gibt mehrere Möglichkeiten, um zum Div zu gelangen, obwohl Sie auch Geschwister, .next usw. Verwenden können

Dies ist mit .slideToggle () viel einfacher :

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

EDIT: machte es .next anstelle von .s Geschwistern

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

Sie können auch Cookies hinzufügen, um sich daran zu erinnern, wo Sie sich gerade befinden ...

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

http://jqapi.com/ Traversing -> Tree Traversal -> Kinder