javascript - jQuery: "$(this).next().next()"有效，但 "$(this).next(' .div')"无效

Question

好的，我正在尝试单独隐藏这组信息。

这有效:

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

<img class="arrow" src="https://via.placeholder.com/40">
<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="https://via.placeholder.com/40">
<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

这不会:

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

<img class="arrow" src="https://via.placeholder.com/40">
<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="https://via.placeholder.com/40">
<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

发生了什么导致第二个选项不起作用？我已经研究了好几天了，还是无法弄清楚!感谢您的意见!

Answer 1

问题

如果你看documentation对于.next(selector)，它不会“找到”与选择器匹配的下一个同级。相反，它只查看下一个同级元素，并且仅在它与选择器匹配(这不是您想要的)时才返回该元素。

以下是 .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.

因此，您可以看到 .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>

然后，您可以使用对元素的精确定位不太敏感的代码:

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

使用 .closest() 向上到达包含和公共(public)父级，然后使用 .find() 查找 .box该组中的元素。