JQuery - 使用计时器循环一个类

Question

我在结构下面有一个列表

<div id="slider">
  <ul>
    <li class='active'> a </li>
    <li> b </li>
    <li> c </li>    
    <li> d </li>
    <li> e </li>
  </ul>
</div>

我需要以循环的方式改变li的类'active' 这是我正在使用的脚本。问题是要么将类活动添加到所有li中，要么从所有li中删除类活动

      toggleSlide = function(){
          $("#slider ul li").each(function(index) {
            if($(this).hasClass('active')){

              $("#slider ul li").removeClass('active');
              $(this).next().addClass('active'));
              //lis = $("#slider ul li")
              //$(lis[(index+1)%lis.length]).addClass('active');
            }
          });
        }
   setInterval(toggleSlide, 5000);​

Answer 1

您可以使用.add()和.last()大大简化此操作，因为.add()中的元素按文档顺序转换，它看起来像这样：

var toggleSlide = function(){
  $("#slider li.active").removeClass()
   .next().add("#slider li:first").last().addClass("active");
}
setInterval(toggleSlide, 5000);

You can test it here (1000ms duration for the demo)

这是如何工作的是下一个<li> ，如果有一个，然后添加第一个，使用.last()（因为它们在文档中）如果那么我们会得到.next()一个，否则该集只包含一个元素:first <li>，我们又回到了一开始。

Answer 2

这应该会更好一点：

toggleSlide = function() {    
    var $active = $('#slider ul li.active');
    if($active.length == 0) {
        $active = $('#slider ul li:first');
    }
    $active.removeClass('active');
    if($active.next('li').length > 0) {
        $active.next('li').addClass('active');
    } else {
        $('#slider ul li:first').addClass('active');
    }
}
setInterval(toggleSlide, 5000);​

您不需要.each()循环，这就是造成问题的原因。您只需要处理当前的活动元素。

实例：

  

http://jsfiddle.net/MS5DV/

Answer 3

我会选择更简单的东西

toggleSlide = function() {
    var active = $("#slider ul li.active");
    var next   = active.next();
    if (next.length === 0) {
        next = $('#slider ul li:first');
    }

    active.removeClass('active');
    next.addClass('active');
}
setInterval(toggleSlide, 1000);

http://jsfiddle.net/HyRYC/1/

基本上，找到活动项并将其保存到本地var。然后找到它之后的项目并保存它。现在，如果最后一个是活动的，那么next()将返回一个没有匹配的jQuery对象，这意味着它的长度为零。在这种情况下，请找到第一个项目next。

不，我们只是从当前有效项中删除active类，然后将其添加到下一个类中。