it-swarm.com.de

Jquery $ (this) Child Selector

Ich benutze das:

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

Auf Seitenstruktur:

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

Es funktioniert nur, wenn Sie nicht mehrere Sätze der Klasse 1/Klasse 2 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 Klasse 2 unter der Klasse 1 betrifft, auf die geklickt wurde? Ich habe Empfehlungen von Wie bekomme ich die Kinder des $ (this) Selectors? ausprobiert, aber es ist mir nicht gelungen.

67
Orbalon

Der beste Weg mit dem HTML-Code, den Sie haben, ist wahrscheinlich, die Funktion next wie folgt zu verwenden:

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

Da der Click-Handler mit dem <a> Passiert, können Sie auch zum übergeordneten DIV aufsteigen und dann nach dem zweiten DIV suchen. Sie würden dies mit einer Kombination aus parent und children tun. 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 befindet:

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

Wenn Sie möchten, dass die "Suche" nicht auf unmittelbare Kinder beschränkt ist, würden Sie im obigen Beispiel find anstelle von children verwenden.

Es ist außerdem immer am besten, den Klassenselektoren den Tag-Namen voranzustellen, wenn dies möglich ist. Wenn also nur <div> - Tags diese Klassen haben sollen, muss der Selektor div.class1, div.class2 sein.

88

Im Klickereignis ist "this" 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, Sie können aber auch .siblings, .next etc. Verwenden

7
John Foster

Dies ist viel einfacher mit . SlideToggle () :

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

BEARBEITEN: machte es .next anstelle von .siblings

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

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

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

7
Steve Perks

http://jqapi.com/ Überqueren -> Baumüberquerung -> Kinder

5
Simple Nick