jquery 遍历列表元素

Question

假设你有这个 html

<ul class="nav sub_nav_home">
    <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
    <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
    <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
 </ul>

如何迭代 jquery 中的每个“li”，添加一个“current”类，等待 3 秒，然后移动到下一个“li”，一旦到达末尾再次开始？

谢谢

Answer 1

一个简单的解决方案可能如下所示:

$(function() {
  var nav = $("ul.sub_nav_home");
  setInterval(function() {
    var next = nav.find("li.current + li, li:first-child").last();
    nav.find("li.current").removeClass("current");
    next.addClass("current");
  }, 3000);
});

You can give it a try here 。您可以将其进一步压缩，只是试图清楚地列出正在发生的事情。它的作用是每 3 秒运行一次执行的函数，我们发现 <ul>从一开始就缓存东西，然后在每次运行时我们都会得到 .current 之后的一个<li> (如果有的话)和第一个，以防万一我们到了最后。我们采用最后一个(因为它们是按文档顺序排列的)，所以我们总是更喜欢下一个而不是循环回到开头。然后只需从当前类中删除该类并将其添加到下一行即可。