Wählen Sie Elemente aus verschiedenen Listen gleichzeitig aus

Question

Dies ist der HTML-Code, den ich für ein Button-Klick-Ereignis benötige, um ausgewählte Elemente in mehreren Listen zu steuern.

$('#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>

Da jedoch die Elemente der gleichen Klassennamen, am Ende verwenden, kann das Skript nicht entscheiden, welches erste/letzte Element ist.

Kann mir jemand eine Idee geben?

Answer 1

die Einzelteile zu erhalten, auf Abfragen wie first-child, last-child verwenden und so.

Weitere detals, Check jQuery API Documentation

Answer 2

verwendet stattdessen $(".section:first-child").addClass('selected') in Ihrem else Zustand