JQuery $(это) Выбор ребенка

Я использую это на странице:

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

Со структурой на странице позже будет выглядеть следующим образом:

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

Это работает отлично, за исключением случаев, когда у вас есть многоуровневые классы class1/class2:

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

Как изменить исходный код jquery так, чтобы он воздействовал только на класс2 под текущим классом1, который был нажат? Я пробовал варианты того, что было рекомендовано на этой странице: Как получить детей из селектора $(this)?, но havent получил его на работу еще

Ответ 1

Лучший способ с HTML, который у вас есть, - это, вероятно, использовать функцию next, например:

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

Так как обработчик кликов происходит с <a>, вы также можете перейти к родительскому DIV, а затем искать вниз для второго DIV. Вы сделали бы это с помощью комбинации parent и children. Этот подход был бы лучше, если HTML, который вы размещаете, не совсем так, а второй DIV может находиться в другом месте относительно ссылки:

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

Если вы хотите, чтобы "поиск" не ограничивался непосредственными детьми, вы должны использовать find вместо children в пример выше.

Кроме того, всегда лучше добавлять ваши селекторы классов с именем тега, если это вообще возможно. т.е. если только теги <div> будут иметь эти классы, сделайте селектор div.class1, div.class2.

Ответ 2

Это намного проще с . slideToggle():

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

EDIT: сделал его .next вместо .siblings

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

Вы также можете добавить cookie, чтобы запомнить, где вы находитесь...

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

Ответ 3

http://jqapi.com/ Перемещение → Обход дерева → Дети

Ответ 4

В событии click "this" есть тег, который был нажат

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

Есть несколько способов добраться до div, хотя вы также можете использовать .siblings,.next и т.д.