「アクティブ」アイテムからJqueryでループが必要です

Question

JavaScriptになっていて、それぞれ<li>のループを「アクティブ」クラスでn°1から<li> n°4までループ設定してからn°に再スタートします1すべての3秒。

私は今まで、このコードを持っている：

HTML

<ul class="collection"> 
    <li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li> 
    <li id="second" class="collection-item ">Ingresa tu N° de documento.</li>  
    <li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li> 
    <li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li> 
</ul> 

はJavaScript

$(document).ready(function(){ 


    setInterval(animacion,3000); 

    function animacion(){ 
     $currently_selected = $('li.active') 

    // Loop back to first sibling if on the last one. 
     if ($currently_selected.next().length = 0){ 
     $next_selected = $currently_selected.siblings().first() 
    } else { 
     $next_selected = $currently_selected.next() 

     $currently_selected.removeClass('active') 
     $next_selected.addClass('active') 
    } 

    } 
}); 

私を助けてください！

Answer 1

• 使用==または===テスト中はlength=としてはassignment operatorとして機能するとブロックが$next_selected変数

$(document).ready(function() { 
 
    setInterval(animacion, 3000); 
 

 
    function animacion() { 
 
    $currently_selected = $('li.active'); 
 
    if ($currently_selected.next().length == 0) { 
 
     $next_selected = $currently_selected.siblings().first(); 
 
    } else { 
 
     $next_selected = $currently_selected.next(); 
 
    } 
 
    $currently_selected.removeClass('active'); 
 
    $next_selected.addClass('active'); 
 
    } 
 
});

.active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="collection"> 
 
    <li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li> 
 
    <li id="second" class="collection-item ">Ingresa tu N° de documento.</li> 
 
    <li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li> 
 
    <li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li> 
 
</ul>

の割り当て後にクローズする必要があります

elsetrueとして、それは常に評価されます

Answer 2

これを行うには1つの方法があります。

setInterval(function(){ 
var items = $('.collection li'); 
items.each(function(ind,val){ 
    if($(this).hasClass('active')){ 
      $(this).removeClass('active'); 
      if(ind !== items.length - 1) {     
       items.eq(ind + 1).addClass('active'); 
       return false; 
      }else{ 
       items.eq(0).addClass('active'); 
       return false; 
      } 
    } 
}); 
},3000);