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>

这个工作正常,除非你有multipule 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？我尝试过本页推荐的变体:如何获取$(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

在单击事件中,"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

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/

Answer 4

http://jqapi.com/ 遍历 - >树遍历 - >儿童