javascript - .next() 方法并跳过特定元素

Question

这个问题已经有答案了:

Efficient, concise way to find next matching sibling? (3 个回答)

已关闭 5 年前。

我正在使用 jQuery .next()迭代列表项的方法。我需要使用.next()循环遍历元素的方法。 .filter-selected是一个在点击时动态添加的类，它可以更改样式，但也可以用作下一个要触发的元素的标记。

举个例子:

<ul>
<li class="filter-selected title-available"><a href="#" class="filter-item">v</a></li>
    <li class="title-available"><a href="#" class="filter-item">item</a></li>
    <li class="title-unavailable"><a href="#" class="filter-item">item</a></li>
    <li class="title-available"><a href="#" class="filter-item">item</a></li>
    <li class="title-unavailable"><a href="#" class="filter-item">item</a></li>
</ul>

我有一个按钮可以触发此行:

$(".filter-selected").next("li.title-available").children().trigger('click');

预期的行为是它仅触发 li具有类 .title-available 的项目但发生的事情是当类 .filter-selected高于 li与 .title-unavailable它无论如何都会在 .title-unavailable 上触发它，即使我将特定的类名传递到 .next()我希望它仅位于具有该类名的 li 项目旁边。

这是为什么呢？如何将一个类传递给 .next()不控制具有特定类名的特定元素？根据我在文档 you can do this. 中看到的内容为什么它在我的实例中不起作用？

Answer 1

jQuery 的 next()仅检索“匹配元素集中每个元素的紧随同级元素。如果提供了选择器，则仅当它与该选择器匹配时才检索下一个同级元素”。

当紧随其后的兄弟与选择器不匹配时，不会检索任何内容。

使用 nextAll() 可能会取得更大成功和 first()选择所有匹配的后续兄弟，然后选择第一个。

$(".filter-selected").nextAll(".title-available").first().children().toggleClass('selected');

.selected {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="filter-selected title-available"><a href="#" class="filter-item">v</a></li>
  <li class="title-unavailable"><a href="#" class="filter-item">item</a></li>
  <li class="title-unavailable"><a href="#" class="filter-item">item</a></li>
  <li class="title-available"><a href="#" class="filter-item">item</a></li>
  <li class="title-unavailable"><a href="#" class="filter-item">item</a></li>
</ul>