異なるリストから同時にアイテムを選択

Question

これは、ボタンクリックイベントを実行して複数のリストで選択したアイテムを制御する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>

、項目は同じクラス名を使用しているので、最後に、スクリプトは/最初の最後の項目があるか決めることができません。

誰でも私にアイデアを教えてもらえますか？これは代わりに$(".section:first-child").addClass('selected')アイテムを得るためにあなたのelse条件

Answer 1

で、その上first-child、last-childなどクエリを使用

Answer 2

使用。

よりdetalsについては

、jQuery API Documentation