.next（）方法并跳过特定元素

Question

我正在使用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的{​​{1}}项，但当.title-available类高于.filter-selected li时，会发生什么1}}它会在.title-unavailable上触发它，即使我将特定的类名传递给.title-unavailable事件，我希望它只在具有该类名的li项旁边。

为什么？如何将类传递给.next()并不能控制具有特定类名的特定元素？基于我在文档中可以看到的内容you can do this.如果它在我的实例中不起作用？

Answer 1

jQuery＆＃39; next()仅检索＆＃34; 紧跟匹配元素集中每个元素的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。＆＃34;

当紧接着的兄弟姐妹与选择器不匹配时，不会检索任何内容。

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

＆＃13;

＆＃13;

<form class="signup-Form" action="includes/signup.inc.php" method="post">

      <div class="first-input">
        <input type="text" name="first"  placeholder="First Name">
      </div>

      <div class="last-input">
        <input type="text" name="last" value="" placeholder="Last Name">
      </div>

      <div class="email-input">
        <input type="text" name="email" value="" placeholder="E-mail">
      </div>

      <div class="college-input">
        <input type="text" name="college" value="" placeholder="College Name">
      </div>

      <div class="password-input">
        <input type="password" name="password" value="" placeholder="Password">
      </div>
      <p class="form-message"></p>

      <div class="signup-btn">
        <button type="submit" name="button">sign-up</button>
      </div>

    </form>

＆＃13;

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

＆＃13;

.selected {
  background-color: yellow;
}

＆＃13;

＆＃13;

＆＃13;