好的,我正在尝试单独隐藏这组信息。
这有效:
$(".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>
发生了什么导致第二个选项不起作用?我已经研究了好几天了,还是无法弄清楚!感谢您的意见!
最佳答案
问题
如果你看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
该组中的元素。
关于javascript - jQuery: "$(this).next().next()"有效,但 "$(this).next(' .div')"无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30281166/