Jquery $ (this) Bambino Selettore

Question

Sto usando questo in una pagina:

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

Con una struttura nella pagina successiva che va come questo:

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

Questo sta lavorando bene, tranne quando si dispone di multipule set Class1/Class2 in questo modo:

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

Come faccio a cambiare il codice jQuery iniziale in modo che effettua solo la class2 sotto la classe corrente1 su cui è stato fatto clic? Ho variazioni di ciò che è stato consigliato in questa pagina provato: How to get the children of the $(this) selector? ma havent ottenuto di lavorare ancora

Answer 1

Il modo migliore con il codice HTML avete probabilmente quella di utilizzare la funzione di next, in questo modo:

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

Poiché il gestore di clic sta accadendo allo <a>, è anche possibile attraversare fino al DIV principale, quindi cercare in basso il secondo DIV. Lo farebbe con una combinazione di parent e children. Questo approccio sarebbe meglio se il codice HTML si mette su non è esattamente così e il secondo DIV potrebbe essere in un'altra posizione rispetto al link:

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

Se si voleva la "ricerca" di non essere limitato a immediato i bambini, usereste find invece di children nell'esempio sopra.

Inoltre, è sempre preferibile anteporre i selettori di classe al nome del tag, se possibile. Ad esempio, se solo i tag <div> avranno queste classi, impostare il selettore su div.class1, div.class2.

Answer 2

http://jqapi.com/ di movimento -> Albero Traversal -> Bambini

Answer 3

Nel caso click "questo" è il tag che è stato cliccato

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

C'è diversi modi per arrivare al div però si potrebbe anche usare .siblings, .Next ecc

Answer 4

Questo è molto più semplice con .slideToggle():

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

EDIT: reso .Next invece di .siblings

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

È inoltre possibile aggiungere il cookie di ricordare dove siete ...

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