JQuery $(this) Дочерний селектор

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

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

63
children css-selectors jquery

4 ответов

лучший способ с 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.

84

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

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

EDIT: сделал это .далее, вместо .братья и сестры!--4-->

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

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

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

7

в событии click "this" - это тег a, который был нажат

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

есть несколько способов добраться до div, хотя вы также можете использовать .родной брат. ,следующий и т. д.

5

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

5