javascript - 同时从不同列表中选择项目

这是我需要执行按钮单击事件来控制多个列表中所选项目的 HTML。

$('#button').click(function(){
    var $next = $('.section.selected').removeClass('selected').next('.section')
    if ($next.length) {
        $next.addClass('selected'); 
    }
    else {
        $(".section:first").addClass('selected');
    }
});

//On click I select next div with same class and remove selected from previous.
//How to loop? After 3 is selected, I want it to go to one again.

.selected { background:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
  <div class="section selected">ONE</div>
  <div class="section">TWO</div>
  <div class="section">THREE</div>
</div>
<div id="all">
  <div class="section selected">ONE</div>
  <div class="section">TWO</div>
  <div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

但是，由于这些项目使用相同的类名，因此最终脚本无法决定哪一个是第一个/最后一个项目。

谁能给我一个主意吗？

最佳答案

要获取项目，请使用 first-child、last-child 等查询。

有关更多详细信息，请查看jQuery API Documentation

关于javascript - 同时从不同列表中选择项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42944886/