我需要一个来自“活动”项目的 Jquery 循环答案

【问题标题】：I need a loop in Jquery from 'active' item我需要一个来自“活动”项目的 Jquery 循环
【发布时间】：2016-06-28 19:05:43
【问题描述】：

我现在使用 JavaScript，我想为每个 <li> 设置一个循环，设置从 n° 1 到 <li> n° 4 的类“活动”，然后每 3 秒重新开始到 n° 1。

到现在为止我都有这个代码：

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')
    }

    }
});

请帮帮我！

【问题讨论】：

标签： javascript jquery loops

【解决方案1】：

在测试length 时使用== 或===，因为= 将充当assignment operator，并将始终评估为true
else 块应在分配$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>

【讨论】：

非常感谢！这正是我想要的！

【解决方案2】：

这是一种方法。

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);

【讨论】：