主页 / 问题 / 919574
Accepted
I'amNotYou
Asked:2020-12-13 22:00:20 +0000 UTC2020-12-13 22:00:20 +0000 UTC

循环遍历列表的元素以转到第一个元素？[复制]

  • 772

您需要使用纯 JS 或 jQuery 来执行此操作

有一个元素列表：

<div>
    <div class="mobile-block">
    <ul class="mobile-list">
        <h2>Автомобильные шины</h2>
        <li class="active">
          <p>Текст</p>
        </li>
        <h2>Мототехника</h2>
        <li>
          <p>Текст</p>
        </li>
        <h2>Лодочные моторы</h2>
        <li>
          <p>Текст</p>
        </li>
        <h2>Надувные лодки</h2>
        <li>
          <p>Текст</p>
        </li>
    </ul>
    </div>
</div>

每隔 1.5 秒需要一次：

  1. 查找具有类 .active ("One") 的列表元素并从中删除该类
  2. 找到列表中的下一个元素（“Two”）并将 .active 类添加到其中

问题是当脚本到达列表的最后一个元素（“四”）时。如何使它到达列表的最后一个元素 - 脚本下一个元素选择列表中的第一个元素（“一个”）？

javascript

1 个回答

  1. Best Answer

    setInterval(function(){
  var items = $(".mobile-list li");
  var index = (items.index($(".mobile-list li.active")) + 1) % items.length;
  items.removeClass("active").eq(index).addClass("active");
}, 1500);
    .active {
  color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="mobile-block">
    <ul class="mobile-list">
        <h2>Автомобильные шины</h2>
        <li class="active">
          <p>Текст</p>
        </li>
        <h2>Мототехника</h2>
        <li>
          <p>Текст</p>
        </li>
        <h2>Лодочные моторы</h2>
        <li>
          <p>Текст</p>
        </li>
        <h2>Надувные лодки</h2>
        <li>
          <p>Текст</p>
        </li>
    </ul>
    </div>
</div>

    • 4

相关问题