JQuery $ (this) Kinder Selector

Question

Ich verwende diese auf einer Seite:

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

Mit einer Struktur auf der Seite später, so geht:

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

Dies funktioniert gut, außer, wenn Sie multipule class1/Klasse 2 Sätze haben in etwa so:

<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 kann ich die anfängliche jQuery-Code ändern, so dass es die einzige bewirkt Klasse2 unter der aktuellen Klasse1, auf die geklickt wurde? Ich habe versucht, Variationen von dem, was auf dieser Seite empfohlen wurde: How to get the children of the $(this) selector? aber havent es bekommt doch mit der HTML Sie würden

Answer 1

Der beste Weg zur Arbeit wahrscheinlich die next Funktion nutzen zu haben, etwa so:

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

Da der Click-Handler mit dem <a> passiert, können Sie auch bis zum übergeordneten DIV verfahren und dann nach dem zweiten DIV suchen. Sie würden dies mit einer Kombination von parent und children tun. Dieser Ansatz wäre am besten, wenn die HTML Sie hochlegen ist nicht genau so, und der zweite DIV in einer anderen Position relativ zu dem Link könnte:

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

Wenn Sie die „Suche“ wollten nicht sofort begrenzt werden Kinder, würden Sie im obigen Beispiel find anstelle von children verwenden.

Auch ist es immer am besten, Ihre Klassenselektoren mit dem Tag-Namen vorzuziehen, wenn es überhaupt möglich ist. dh wenn nur <div> Tags diese Klassen haben, machen Sie den Selektor div.class1, div.class2.

Answer 2

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

Answer 3

in dem Click-Ereignis "dieses" ist ein Tag, das obwohl geklickt wurde auf die div

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 Sie könnten auch .siblings verwenden .next etc

Answer 4

Dies ist viel einfacher, mit .slideToggle():

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

EDIT: machte es statt .siblings

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

Sie .NEXT auch cookie hinzufügen können, sich erinnern, wo Sie sich auf ...

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