Jquery $ (this) Child Selector

70

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.

Max Shvartsman
quelle

Antworten:

91

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.

Paolo Bergantino
quelle
8

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

John Foster
quelle
7

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/

Steve Perks
quelle
Vielen Dank für die Vereinfachung der slideToggle-Referenz. Ich hatte sie vorher nur getrennt, weil ich mit fadeOut im else
5

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

Joshuahedlund
quelle