Jquery - $(dieses) Kind-Selektor

Ich bin mit dieser auf einer Seite:

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

Mit einer Struktur in die Seite später das geht wie folgt:

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

Dies gut funktioniert, außer wenn Sie multipule class1/class2 Sätze 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 die erste jquery-code, so dass es nur Effekte, die class2 unter den aktuellen class1, auf die geklickt wurde? Ich habe versucht, Variationen von dem, was wurde empfohlen auf dieser Seite: Wie bekommen die Kinder die $() - Selektor? aber nicht, bekommen Sie zu arbeiten, dennoch

InformationsquelleAutor der Frage | 2009-05-08

  1. 84

    Der beste Weg, mit der HTML-Sie würde wahrscheinlich sein, die next - Funktion, etwa so:

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

    Seit den click-handler passiert <a> könnten Sie auch durchziehen bis zu den übergeordneten DIV ist, dann suchen Sie nach unten für die zweite DIV. Tun Sie dies mit einer Kombination von parent und Kinder. Dieser Ansatz wäre am besten, wenn der HTML-Sie ist nicht genau wie, und das zweite DIV-Element könnte in einer anderen Position relativ zu dem link:

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

    Wenn Sie wollten, dass die "Suche", um nicht nur die unmittelbaren Kinder, die Sie verwenden würden, statt children im Beispiel oben.

    Auch, es ist immer am besten stellen Sie Ihre class-Selektoren mit den tag-Namen, wenn überhaupt möglich. dh, wenn nur <div> - tags gehen, um jene Klassen, stellen Sie den Wahlschalter werden div.class1div.class2.

    InformationsquelleAutor der Antwort Paolo Bergantino

  2. 7

    Dies ist viel einfacher, mit .slideToggle():

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

    EDIT: gemacht es .nächste statt .Geschwister

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

    Können Sie auch hinzufügen, Cookies zu erinnern, wo du bist...

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

    InformationsquelleAutor der Antwort Steve Perks

  3. 5

    In das click-Ereignis "dieses" ist das ein tag, auf den 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 Wege, um auf das div-obwohl Sie auch nutzen könnten .Geschwister, .nächste usw

    InformationsquelleAutor der Antwort John Foster

  4. 5

    http://jqapi.com/
    Durchqueren--> Baum-Traversal --> Kinder

    InformationsquelleAutor der Antwort

Schreibe einen Kommentar