时间戳

首页 > 解决方案 > 具有活动/删除类的函数 setInterval next()

jquery - 具有活动/删除类的函数 setInterval next()

问题描述

我尝试使用 setInterval fonction 删除类并将类添加到下一个元素

jQuery(document).ready(function() {
	setInterval(function() {
  	var active = $('li').hasClass('active');
		active.removeClass('active');
    active.next('li').addClass('active');
	}, 3000);
});
li.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='active'>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

标签： jquery

解决方案

你可以这样做var active = $('li.active');

工作演示

jQuery(document).ready(function() {
  setInterval(function() {
    var active = $('li.active');
    active.removeClass('active');
    if (active.next('li').length == 0) {
      active.parent('ul').find('li:first').addClass('active');
    } else {
      active.next('li').addClass('active');
    }
  }, 1000);
});
li.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='active'>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

推荐阅读