JQuery .next() 没有找到下一个兄弟答案

【问题标题】：JQuery .next() not finding next siblingJQuery .next() 没有找到下一个兄弟
【发布时间】：2013-11-06 16:06:08
【问题描述】：

我有以下html：

<div class="more">▼</div>
<div class="showDescription">blah blah blah</div>
<div class="more">▼</div>
<div class="somethingElse" style="display:none">do do do</div>
<div class="showDescription">blah2 blah2 blah2</div>

类 showDescription 设置为 display:none

当我单击 ▼ 时，我希望显示下一个具有 showDescription 类的 div，所以我正在使用：

$('.more').click(function() {
    $(this).html($(this).html()=='▼'?'▲':'▼').next('.showDescription').stop().fadeToggle();
});

这对第一个 ▼ 非常有效，但对第二个不合适，我想是因为有些东西在路上，但我认为 .next() 找到了下一个兄弟姐妹，它们是什么？

我该如何解决这个问题？它真的应该这样做吗？

这是fiddle

【问题讨论】：

改用.closest() 或.nextAll()。
@gvee：不。这不是最接近的。
.next() 函数查看下一个元素，然后将其与选择器进行比较。如果它匹配，那么你有一个元素的引用，如果它不匹配你有一个没有元素的引用。在找到匹配或用完的元素之前，它不会查看所有元素。
jQuery selector for finding the first element after a given element that matches a selector的可能重复
@RocketHazmat 哦，天哪，真尴尬！你说的很对，我的错。

标签： javascript jquery

【解决方案1】：

.next() 将尝试仅获取满足给定选择器的下一个元素，在第二种情况下，下一个兄弟元素不是 showDescription 元素

$('.more').click(function () {
    $(this).html(function (_, html) {
        return $.trim(html) == '▼' ? '▲' : '▼'
    }).nextAll('.showDescription').first().stop().fadeToggle();
});

演示：Fiddle

【讨论】：

【解决方案2】：

.next 只会直接看下一个，不会看下一个。你想要.nextUntil。

$('.more').click(function() {
    $(this).html($(this).html()=='▼'?'▲':'▼').nextUntil('.more', '.showDescription').stop().fadeToggle();
});

演示：http://jsfiddle.net/vDPZH/10/

【讨论】：