Jquery $ (this) Child Selector

Question

Używam tego na stronie:

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

Dzięki konstrukcji na stronie później, że idzie tak:

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

ta działa poprawnie, z wyjątkiem, gdy masz multipule zestawy class1/class2 tak:

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

Jak mogę zmienić początkowe kodu jQuery tak, że tylko EFEKTY class2 pod aktualną klasą 1, która została kliknięta? Próbowałem odmiany co było zalecane na tej stronie: How to get the children of the $(this) selector? ale miałaś dostał go do pracy jeszcze

Answer 1

Najlepszym sposobem z HTML trzeba będzie prawdopodobnie korzystać z funkcji next, tak:

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

Ponieważ obsługa kliknięć dzieje się z <a>, możesz również przejść do rodzica DIV, a następnie przeszukać drugi DIV. Można to zrobić za pomocą kombinacji parent i children. Takie podejście byłoby najlepiej, gdyby HTML można umieścić nie jest dokładnie tak, a drugi DIV może być w innej lokalizacji w stosunku do linku:

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

Jeśli chciał „Szukaj”, aby nie ograniczać się do natychmiastowego dzieci, użyłbyś find zamiast children w powyższym przykładzie.

Zawsze najlepiej jest poprzedzać selektory klasy nazwą znacznika, jeśli to możliwe. tzn. jeśli tylko znaczniki będą miały te klasy, ustaw selektor na div.class1, div.class2.

Answer 2

http://jqapi.com/ przemieszczenia -> przechodzenie drzewa -> Dzieci

Answer 3

W przypadku kliknięcia "to" jest tag, który został kliknięty

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

Istnieje wiele sposobów, aby dostać się do div chociaż można też użyć .siblings, .next itp

Answer 4

to jest dużo prostsze z .slideToggle():

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

EDIT: wykonana jest .next zamiast .siblings

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

Można również dodać cookies do zapamiętania gdzie jesteś ...

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