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

Posted 2023-02-25

【中文标题】Jquery，在具有相同类的所有锚点之后选择第一个下一个元素

【英文标题】：Jquery, select first next element after all anchors with same class

【发布时间】：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')。

【参考方案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>