Jquery，在具有相同类的所有锚点之后选择第一个下一个元素答案

【问题标题】：Jquery, select first next element after all anchors with same classJquery，在具有相同类的所有锚点之后选择第一个下一个元素
【发布时间】：2020-01-02 20:55:11
【问题描述】：

我想在所有具有相同类的锚点之后选择第一个下一个元素。
HTML

<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
...

现在我想选择所有ul1,ul2,ul3,ul4。
我在这里尝试过：

console.log($(".some_anchors").nextAll('ul:first'));

但它只返回ul1。
如何解决这个问题？

【问题讨论】：

要全选ul？
我的HTML中有很多ul。我想先选择下一个ul，毕竟anchors 和some_anchors 类。
循环遍历$(".some_anchors")和add的结果next('ul')。

标签： jquery selector next

【解决方案1】：

您可以使用下一个兄弟选择器+ 在类元素之后直接定位 ul。

console.log(
  $('.some_anchors + ul').get()
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
<ul class="not-me">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
<ul class="not-me">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
<ul class="not-me">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
<ul class="not-me">
</ul>

【讨论】：

【解决方案2】：

使用以下内容：

$(function() {
  var lists = [];
  $(".some_anchors").each(function(i, el) {
    lists.push($(el).next());
  });
  console.log(lists);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>

<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>

【讨论】：

【解决方案3】：

我觉得可能对你有帮助

  $('li').each(function () {
        if ($(this).hasClass("some_anchors")) {
            $(this).show();

        } else {
            $(this).hide();
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;" class="siblings">
  <ul>
    <li>li (No Class)</li>
    <li>li (No Class)</li>
    <li>li (No Class)</li>
    <li class="some_anchors">li (sibling with class name "some_anchors")</li>
    <li>li (No Class)</li>
    <li>li (No Class)</li>
  </ul>   
</div>

【讨论】：