Jquery $(this) 子选择器答案

【问题标题】：Jquery $(this) Child SelectorJquery $(this) 子选择器
【发布时间】：2010-10-24 21:38:48
【问题描述】：

我正在使用这个：

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? 的建议，但没有成功。

【问题讨论】：

标签： jquery css-selectors children

【解决方案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】：

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

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

虽然您也可以使用 .siblings、.next 等，但有多种方法可以访问 div

【讨论】：

【解决方案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/

【讨论】：

感谢 slideToggle 参考以简化。我之前将它们分开只是因为我在 else 中使用了 fadeOut

【解决方案4】：

http://jqapi.com/ 遍历--> 树遍历--> 子节点

【讨论】：