Jquery $(this) 子选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/841553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery $(this) Child Selector
提问by Paolo Bergantino
I'm using this:
我正在使用这个：
jQuery('.class1 a').click( function() {
if ($(".class2").is(":hidden")) {
$(".class2").slideDown("slow");
} else {
$(".class2").slideUp();
}
});
On page structure:
在页面结构上：
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
It only works when you don't have multiple class1/class2 sets like:
它仅在您没有多个 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>
How do I change the initial jquery code so that it only effects class2 under the class1 that was clicked? I tried recommendations from How to get the children of the $(this) selector?but haven't succeeded.
如何更改初始 jquery 代码，使其仅影响单击的 class1 下的 class2？我尝试了How to get the children of the $(this) 选择器？但没有成功。
回答by Paolo Bergantino
The best way with the HTML you have would probably be to use the nextfunction, like so:
您拥有的 HTML 的最佳方法可能是使用该next函数，如下所示：
var div = $(this).next('.class2');
Since the click handler is happening to the <a>, you could also traverse up to the parent DIV, then search down for the second DIV. You would do this with a combination of parentand children. This approach would be best if the HTML you put up is not exactly like that and the second DIV could be in another location relative to the link:
由于单击处理程序发生在 上<a>，您还可以向上遍历到父 DIV，然后向下搜索第二个 DIV。你会用的组合做到这一点parent和children。如果您放置的 HTML 与此不完全相同，并且第二个 DIV 可能位于相对于链接的另一个位置，则此方法最好：
var div = $(this).parent().children('.class2');
If you wanted the "search" to not be limited to immediate children, you would use findinstead of childrenin the example above.
如果您希望“搜索”不限于直接的孩子，您可以在上面的示例中使用find而不是children。
Also, it is always best to prepend your class selectors with the tag name if at all possible. ie, if only <div>tags are going to have those classes, make the selector be div.class1, div.class2.
此外，如果可能的话，最好在类选择器前面加上标签名称。即，如果只有<div>标签将具有这些类，则将选择器设为div.class1, div.class2。
回答by John Foster
In the click event "this" is the a tag that was clicked
在点击事件中“this”是被点击的标签
jQuery('.class1 a').click( function() {
var divToSlide = $(this).parent().find(".class2");
if (divToSlide.is(":hidden")) {
divToSlide.slideDown("slow");
} else {
divToSlide.slideUp();
}
});
There's multiple ways to get to the div though you could also use .siblings, .next etc
尽管您也可以使用 .siblings、.next 等，但有多种方法可以访问 div
回答by Steve Perks
This is a lot simpler with .slideToggle():
使用.slideToggle() 就简单多了：
jQuery('.class1 a').click( function() {
$(this).next('.class2').slideToggle();
});
EDIT: made it .next instead of .siblings
编辑：使它成为 .next 而不是 .siblings
http://www.mredesign.com/demos/jquery-effects-1/
http://www.mredesign.com/demos/jquery-effects-1/
You can also add cookie's to remember where you're at...
您还可以添加 cookie 以记住您所在的位置...
http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/
http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/
回答by Steve Perks
http://jqapi.com/Traversing--> Tree Traversal --> Children
http://jqapi.com/遍历--> 树遍历--> 孩子
