Select items from different lists at the same time

Question

This is the HTML I got to do a button click event to control selected items in more than one list.

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

However, because the items are using the same class name, at the end, the script can't decide which one is first / last item.

Can anyone give me an idea?

Answer 1

在else条件下使用$(".section:first-child").addClass('selected')代替

Answer 2

To get the items, use Queries like first-child , last-child and so on.

For more detals, Check jQuery API Documentation