jquery - 每 N 秒将类名移动到下一个同级

Question

我有一个列表如下:

<ul>
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

每隔 N 秒，我想将“突出显示”类移动到下一个元素。当没有更多的 sibling 时，返回并从头开始。

有人可以帮助使用 jQuery 来完成这个任务吗？

谢谢!

Answer 1

类似这样的事情应该可以做到:

HTML:

<ul id="myList">
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript:

$(function() {
    var lis = $("#myList > li"),
        currentHighlight = 0;
        N = 5;//interval in seconds
    setInterval(function() {
        currentHighlight = (currentHighlight + 1) % lis.length;
        lis.removeClass('highlighted').eq(currentHighlight).addClass('highlighted');
    }, N * 1000);
});

<强> DEMO