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

4 63
jquery css-selectors children

4 ответа:

лучший способ с HTML у вас, вероятно, будет использовать next

84

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

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

редактировать: сделал это .далее, вместо .братья и сестры

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

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

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

7

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

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