JQuery $ (this) Selector Criança

Question

Eu estou usando o seguinte:

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

Na estrutura da página:

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

Ele só funciona quando você não tem vários conjuntos class1 / Class2 como:

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

Como faço para alterar o código jquery inicial para que ele só efeitos class2 sob a class1 que foi clicado? Tentei recomendações de como obter os filhos do $ (this) selector? mas não conseguiram.

Answer 1

A melhor maneira com o HTML você tem provavelmente seria usar a função next , assim:

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

Uma vez que o manipulador de clique está acontecendo com a <a>, você também pode percorrer até o DIV pai, em seguida, procurar para baixo pela segunda DIV. Você faria isso com uma combinação de parent e children . Esta abordagem seria melhor se o HTML você colocar-se não é exatamente assim e o segundo DIV poderia ser em outro local em relação ao link:

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

Se você queria a "busca" para não se limitam a filhos imediatos, você usaria find em vez de children no exemplo acima.

Além disso, é sempre melhor para preceder seus seletores de classe com o nome da marca, se possível. ou seja, se somente tags <div> vão ter essas classes, faça o selector de ser div.class1, div.class2.

Answer 2

No evento clique "isto" é a uma tag que foi clicado

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

Há várias maneiras de chegar ao div embora você também pode usar .siblings, .next etc

Answer 3

Este é muito mais simples com .slideToggle () :

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

EDIT: tornou .next vez de .siblings

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

Você também pode adicionar o cookie de se lembrar onde você está ...

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

Answer 4

http://jqapi.com/ Atravessando -> Tree Traversal -> Crianças