主页 / 问题 / 919538
Accepted
I'amNotYou
Asked:2020-12-13 20:54:48 +0000 UTC2020-12-13 20:54:48 +0000 UTC

如何遍历列表中的元素以获取第一个元素？

  • 772

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

有一个元素列表：

<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

每隔 1.5 秒需要一次：

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

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

javascript

2 个回答

  1. Best Answer

    jQuery中的实现

    $(document).on('ready', function(){
	interval = 1500; //Полторы секунды
	setInterval(function(){
		count = $("ul li").length; //Получаем общее кол.во элементов
		index = $("ul li.active").index() + 1; //Ищем порядковый номер элемента и добавляем +1 что бы получить индекс следующего
		$("ul li.active").removeClass("active"); //Убираем у текущего элемента класс active
		if(index== count) index = 0; //Если индекс выходит за рамки, ставим 0, что бы начать с 1 элемента
		$("ul li").eq(index).addClass("active"); //Добавляем класс .active нужному элементу
	}, interval);
});
    li{
	  color: blue;
	}
	li.active{
	  color: red;
	}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

    • 4

  2. 和之前的作者很像，但是自从我开始做之后，我决定展示一下。

    $(document).on('ready', function(){
  const interval = 1500;
  const elements = $("ul li");
  const count = elements.length;
  
  setInterval(function(){
	  let curElement = $("ul li.active");
	  let index = elements.index(curElement);
      curElement.removeClass("active");
	  elements.eq(++index%count).addClass("active");
  }, interval);
});
    .active {
  color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

    • 1

相关问题