Javascript jQuery:this:$（此）.next（）.next（）；工作，但是$（此）.next（'；.div'；）"；不

好的，我正试图把这组信息单独隐藏起来

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

但当我这样做的时候：

$(".arrow").click(function() {
    $(this).next('.box').slideToggle();
});

---

发生了什么使得第二种选择不起作用？我已经做了好几天了，都搞不懂！我感谢你的意见

问题

如果查看for

.next（选择器）

，它不会“找到”与选择器匹配的下一个同级。相反，它只查看下一个同级，并且仅当它与选择器匹配时才返回该元素，而选择器不是您想要的

下面是

.next（）

的文档内容：

描述：获取中每个元素的紧跟其后的同级 匹配元素的集合。如果提供了选择器，它将检索 下一个同级仅当它与该选择器匹配时

因此，您可以看到

.next（“.box”）

将查看紧跟在

.arrow

元素之后的

h2

元素（即下一个同级元素），然后将其与

.box

选择器进行比较，因为它们不匹配，它将返回一个空的jQuery对象

---

使用.nextAll（）的解决方案

如果需要与选择器匹配的下一个同级，可以使用以下选项：

$(this).nextAll(".box").eq(0).slideToggle();

这将查找与选择器匹配的所有后续同级，然后仅提取第一个同级

---

创建自己的.findNext（）方法

我经常想知道为什么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);
}

然后，您只需使用：

$(this).findNext(".box").slideToggle();

---

---

选项：向HTML添加更多结构，使内容更简单、更灵活

仅供参考，解决此类问题的常用方法是在每组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>

---

这将使用

.closest（）

到达包含和公共父级，然后使用

.find（）

来查找该组中的

.box

元素。

仅供参考，HTML的缩进使您看起来好像在实际不存在的元素之间存在父/子关系（这是显示HTML的一种误导方式）。啊，是的，这是有道理的，完全是我的错！我对这方面还不太熟悉，所以我还是习惯于一切。谢谢你的指点！更具表现力：

$（this）.nextAll（.box”）.first（）.slideToggle（）“更多HTML结构，使事情更简单、更灵活”
<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>

$(".arrow").click(function() {
    $(this).closest(".container").find(".box").slideToggle();
});