jQuery $ (this) Selector Niño

Question

estoy usando esto en una página:

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

Con una estructura en la página posterior que dice así:

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

Esto está funcionando bien, excepto cuando se tiene conjuntos de clase 1/Class2 multipule así:

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

¿Cómo se cambia el código jQuery inicial, de manera que sólo afecta a la class2 en la class1 actual en la que se hizo clic? He intentado variaciones de lo recomendado en esta página: How to get the children of the $(this) selector? pero havent conseguido que trabajar aún

Answer 1

La mejor manera con el HTML usted tiene probablemente sería utilizar la función next, así:

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

Desde el controlador de clic está sucediendo a la <a>, también se puede recorrer hasta el DIV padres, a continuación, buscar hacia abajo para el segundo DIV. Haría esto con una combinación de parent y children. Este enfoque sería mejor si el HTML se pone arriba no es exactamente así, y el segundo DIV podría estar en otra ubicación con respecto al enlace:

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

Si quería la "búsqueda" para no limitarse a inmediata niños, usaría find en lugar de children en el ejemplo anterior.

Además, siempre es mejor para anteponer sus selectores de clase con el nombre de la etiqueta, si es posible. es decir, si solo las etiquetas <div> van a tener esas clases, haga que el selector sea div.class1, div.class2.

Answer 2

http://jqapi.com/ de desplazamiento -> Árbol Transversal -> Niños

Answer 3

En el evento click "esto" es la etiqueta que se hizo clic

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

Hay de múltiples formas de llegar a la div aunque también se podría utilizar .siblings, etc .Next

Answer 4

Esto es mucho más simple con .slideToggle():

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

EDIT: lo hizo en lugar de .Next .siblings

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

También puede agregar la cookie de recordar dónde estás ...

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