用class获取下一个元素（同时省略其他元素）

Question

我有这段代码：

var toLoad = $('.sidebar').find('.active').next('li.list-element').attr('data-id');

哪个应该在.active list-element级后检测 next 元素。它没有。问题是，我有一个这样的列表：

<li class="list-element active">...</li>
<li class="list-element">...</li>
<li class="ads">...</li>
<li class="list-element">...</li>
<li class="list-element">...</li>

当我到达ads时，我的脚本停止了。我该怎么办？

Answer 1

.next()只会定位下一个元素。您需要使用.nextAll()以及:first或:eq(0)来定位具有所需类别的下一个第一个兄弟：

 var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:first').attr('data-id')

Answer 2

问题是您对.next（）方法的理解是错误的，它不会返回与选择器匹配的元素元素，只有当它与传递的选择器匹配时它才会返回下一个兄弟元素

一个简单的解决方案是找到所有下一个元素，然后使用集合

中的第一个元素

var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:eq(0)').attr('data-id');

Answer 3

Jquery next()

  

获取该组中每个元素的紧随其后的兄弟   匹配的元素。如果提供了选择器，它将检索下一个选择器   兄弟姐妹只有匹配那个选择器。

Answer 4

所以，当你写

$('.sidebar').find('.active')

这会找到一个元素，li类active和.next()只能从该组中选择。

但是，您可以只使用一个CSS选择器来查找.active中的下一个元素，如下所示：

$('.sidebar .active ~ li.list-element:first').attr('data-id')

~是general sibling selector，它匹配原始元素（.active）之后的元素并共享父元素（.sidebar）。