Jquery - 每 5 秒一次将一个类添加到 <li> 列表中

Question

正如我的标题所暗示的那样。对于我正在构建的网站，我需要在页面上的<li> 列表中添加一个“活动”类。

有时会有六个<li>，有时是 17 个。它需要是动态的。

然后我需要按顺序将类添加到每个<li>，一次一个，每 5 秒一次。

---

我在想，也许我可以有一个计数器来计算所有<li>，并有一个循环函数将类添加到第一个类并添加到另一个计数器。当该计数器达到所有 <li> 的原始计数器时，它将停止。但它必须每 5 秒发生一次。

任何帮助或建议将不胜感激

-乔帕

Answer 1

使用.eq 选择匹配集中索引n 处的元素。在specified-interval之后使用setInterval调用处理程序

var counter = 0;
setInterval(function() {
  var c = counter % $('li').length;
  $('li').removeClass('active');
  $('li').eq(c).addClass('active');
  ++counter
}, 5000);

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Fiddle Demo