Question

我有以下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

Answer 1

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

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

演示：Fiddle

Answer 2

.next只会直接看下一个，接下来不会查看所有内容。你想要.nextUntil。

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

DEMO：http://jsfiddle.net/vDPZH/10/

JQuery .next（）找不到下一个兄弟

2 个答案: