Jquery $ (this) Child Selector

Question

Я использую это:

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, чтобы он воздействовал только на class2 в рамках class1, по которому щелкнули? Я попробовал рекомендации из Как получить дочерние элементы селектора $ (this)? , но не удалось.

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

Answer 2

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

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

РЕДАКТИРОВАТЬ: сделал это .next вместо .siblings

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

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

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

Answer 3

В событии щелчка "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 и т. Д.

Answer 4

http://jqapi.com/ Обход -> Обход дерева -> Дети