jquery 最后一个兄弟再次来到第一个兄弟？

Question

我只想知道在这个程序中，当我们按下按钮时，下一个兄弟会显示为红色，但当最后一个元素出现时，程序将停止，我只想在最后一个元素之后再次出现在第一个

    var nextDiv = $( "#start" );
    
    nextDiv.css( "background-color", "red" );
    
    $( "button" ).click(function() {
    
      nextDiv  = nextDiv.next();
    
      $( "div" ).css( "background-color", "" );
    
      nextDiv.css( "background-color", "red" );
     
    
    });

    div{
    
    	border:1px solid black;
    	width:50px;
    	height: 50px;
    	display: inline-block;
    	margin: 10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Move to Next</button> 
    
    <div id="start">div1 </div>
    
    <div>div2</div>
    
    <div>div3</div>
     
    <div>div4</div>
    
    <div>div5</div>
    <div>div6</div>

Answer 1

这里我有另一种解决方案

    var divs = $('.divs').find('div').length;
    var count = 1;

    $( "button" ).click(function() {
        count++;
        if( count > divs){
            count = 1;
            $('div').removeClass('active');
            $('#start').addClass('active');
        } else {
            $('div.active').removeClass('active').next().addClass('active');
        }
    });

    .divs div{
    	border:1px solid black;
    	width:50px;
    	height: 50px;
    	display: inline-block;
    	margin: 10px;
    }
    div.active{
      background:red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
  <button>Move to Next</button> 
    <div id="start" class='active'>div1 </div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
</div>
  

初学者很容易理解