在块元素之间使用 next()

Question

我正在尝试使用 jQuery 的 next() 来抓取所选元素的下一段，但因为有一个 div 挡住了路，似乎 next 不起作用。我应该改用什么选择器？

作品：

<div>
   <span class="clickme">A name here</span>
   <p class="showme" style="display:none;">Here's some text! </p>
</div>
$('.clickme').click(function() {
   $(this).next('.showme').slideDown();
});

不起作用：

<div>
   <span class="clickme">A name here</span>
   <div></div>
   <p class="showme" style="display:none;">Here's some text! </p>
</div>
$('.clickme').click(function() {
   $(this).next('.showme').slideDown();
});

为什么会发生这种情况？具有指定类的next() 不会超出下一个块元素吗？这就是发生这种情况的原因吗？是否有一个选择器指定应该选择 showme 的“下一个”类？

小提琴 - http://jsfiddle.net/QespX/

Answer 1

.next()：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索下一个兄弟。

.nextAll():获取匹配元素集中每个元素的所有后续兄弟，可选地由选择器过滤。

这就是你的方式

$('.clickme').click(function() { 
    $(this).nextAll('.showme').slideDown();   //as clickme>showme
});

有关Tree Traversal 的更多信息可以在jQuery API 文档中找到。

Answer 2

你可以使用.nextAll():

$('.clickme').click(function() {
    $(this).nextAll('.showme').slideDown();
});

演示：http://jsfiddle.net/QespX/1/

这有效的唯一原因是.showme 是.clickme 的兄弟。 .nextAll() 将在您单击的元素之后选择 所有 个 .showMe 元素，但由于您只有一个，所以它会起作用。

如果有问题，您可以使用.first() 缩小结果范围：

$(this).nextAll('.showme').first().slideDown();