Jquery $(this) 子选择器

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代码，以便它仅影响单击的class1下的class2？ 我尝试了来自How to get the children of the $(this) selector? 的建议，但没有成功。

- Orbalon

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。

- Paolo Bergantino

Answer 2

在点击事件中，“this”是被点击的a标签。

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

有多种方法可以访问到div，你也可以使用.siblings、.next等方法。

- John Foster

Answer 3

使用.slideToggle()会使得这个过程变得简单很多：

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

编辑：将其更改为.next而不是.siblings

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

您还可以添加cookie以记住您的位置...

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

- Steve Perks

---

感谢 slideToggle 的参考，使得代码更简洁。之前我将它们分开只是因为我在尝试使用 else 中的 fadeOut。 - Orbalon

Answer 4

http://jqapi.com/ 遍历-->树的遍历-->子元素

- Simple Nick