Javascript jQuery: this: "$(this).next().next()" 有效，但 "$(this).next('.div')" 不行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30281166/
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: "$(this).next().next()" works, but "$(this).next('.div')" does Not
提问by fjaxyu
Okay, I am trying to get this set of information to hide individually.
好的，我试图让这组信息单独隐藏。
<img class="arrow" src="images/navigation/arrowright.png">
<H2>More Information</H2>
<div class="box">
<h2>Bibendum Magna Lorem</h2>
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<img class="arrow" src="images/navigation/arrowright.png">
<H2>A Second Group of Information</H2>
<div class="box">
<h2>Bibendum Magna Lorem</h2>
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
It works when I type this:
当我输入以下内容时它有效：
$(".arrow").click(function() {
$(this).next().next().slideToggle();
});
but not when I do this:
但不是当我这样做时：
$(".arrow").click(function() {
$(this).next('.box').slideToggle();
});
What is happening that makes the second option not work? I've been at it for days and can't bloody figure it out! I appreciate your input!
发生了什么使第二个选项不起作用？我已经研究了好几天了，但他妈的想不通！我感谢您的意见！
回答by jfriend00
The Problem
问题
If you look at the documentationfor .next(selector), it does not "find" the next sibling that matches the selector. Rather, it looks at JUST the next sibling and ONLY returns that element if it matches the selector which is not what you want.
如果你看一下文档的.next(selector)，它没有“发现”的选择相匹配的下一个同级。相反，它只查看下一个兄弟元素，并且仅在它匹配不是您想要的选择器时才返回该元素。
Here's what the doc for .next()says:
这是 doc for.next()所说的：
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
描述：获取匹配元素集中每个元素的紧随其后的兄弟元素。如果提供了选择器，则仅当它与该选择器匹配时才检索下一个兄弟。
So, you can see that .next(".box")will look at the h2element that immediately follows your .arrowelement (that's the next sibling element) and then compare that to the .boxselector and since they don't match, it will return an empty jQuery object.
因此，您可以看到.next(".box")它将查看h2紧跟在您的.arrow元素之后的元素（即下一个兄弟元素），然后将其与.box选择器进行比较，由于它们不匹配，它将返回一个空的 jQuery 对象。
A Solution Using .nextAll()
使用 .nextAll() 的解决方案
If you want the next sibling that matches a selector, you can use this:
如果你想要下一个匹配选择器的兄弟，你可以使用这个：
$(this).nextAll(".box").eq(0).slideToggle();
This finds all the siblings that follow that match the selector and then extracts just the first one.
这将查找与选择器匹配的所有兄弟姐妹，然后仅提取第一个。
Create Your Own .findNext() Method
创建您自己的 .findNext() 方法
I've so often wondered why jQuery doesn't have a method for this that I've made one myself:
我经常想知道为什么 jQuery 没有我自己制作的方法：
// get the next sibling that matches the selector
// only processes the first item in the passed in jQuery object
// designed to return a jQuery object containing 0 or 1 DOM elements
jQuery.fn.findNext = function(selector) {
return this.eq(0).nextAll(selector).eq(0);
}
And, then you would just use:
然后，您只需使用：
$(this).findNext(".box").slideToggle();
Option: Add More Structure to the HTML to Make Things Simpler and More Flexible
选项：向 HTML 添加更多结构以使事情更简单、更灵活
FYI, a common approach to problems like this is to put a containing div around each set of DOM elements like this:
仅供参考，解决此类问题的一种常见方法是在每组 DOM 元素周围放置一个包含 div，如下所示：
<div class="container">
<img class="arrow" src="images/navigation/arrowright.png">
<H2>More Information</H2>
<div class="box">
<h2>Bibendum Magna Lorem</h2>
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="container">
<img class="arrow" src="images/navigation/arrowright.png">
<H2>A Second Group of Information</H2>
<div class="box">
<h2>Bibendum Magna Lorem</h2>
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
Then, you can use code that is a little less sensitive to exact positioning of elements:
然后，您可以使用对元素的精确定位不太敏感的代码：
$(".arrow").click(function() {
$(this).closest(".container").find(".box").slideToggle();
});
This goes up to the containing and common parent using .closest()and then uses .find()to find the .boxelement in that group.
这上升到包含和公共父级 using .closest()，然后用于.find()查找该.box组中的 元素。
