Jquery $（this）子select器

我在页面上使用这个：

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> 

这工作正常，除非你有multipl 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）select器的子元素？ 但还没有得到它的工作

Answer 1

使用HTML的最佳方式可能是使用next函数，如下所示：

 var div = $(this).next('.class2'); 

由于点击处理程序正在发生到<a> ，您还可以遍历到父DIV，然后search第二个DIV。 你会用parent和children的组合来做到这一点。 如果你所提供的HTML不完全像这样，第二个DIV可能在相对于链接的另一个位置，这种方法是最好的：

 var div = $(this).parent().children('.class2'); 

如果你想让“search”不限于直接的孩子，你可以在上面的例子中使用find而不是children 。

另外，如果可能的话，最好预先在标签名称前加上你的类select器。 即，如果只有<div>标签将具有这些类，使select器为div.class1 ， div.class2 。

Answer 2

.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 3

在点击事件中，“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 4

http://jqapi.com/穿越; – >树遍历 – >儿童