Добавить и удалить класс из списка с помощью JQuery

Question

У меня есть неупорядоченный список HTML, такие как это:

<ul> 
    <li class="current"></li> 
    <li></li> 
    <li></li> 
</ul> 

Использование JQuery, я хотел бы, чтобы автоматически удалить текущий класс из первого элемента Li и добавить его к Второй класс. Через короткий промежуток времени я хотел бы удалить класс из второго элемента li и добавить его к третьему. Я бы хотел, чтобы это повторилось.

меня это до сих пор, но это не совсем то, что мне нужно:

$("ul li:first-child").addClass('current').delay(1000).queue(function(next){ 
    $(this).removeClass('current'); 
    $(this).next().addClass('current') 
    next(); 
}); 

Answer 1

Если вы хотите, чтобы быть в состоянии остановить и запустить его:

var myInterval; 
var myFunc = function() { 
     var cur = $('ul li.current'); 
     if(cur.index() == $('ul li').length - 1) { 
      cur.removeClass('current'); 
      $('ul li:first').addClass('current'); 
     } else { 
      cur.removeClass('current').next().addClass('current'); 
     } 
    }; 
//Start Interval 
myInterval = setInterval(myFunc, 1000); 

Затем, чтобы остановить/старт :

clearInterval(myInterval); 
myInterval = setInterval(myFunc, 1000); 

jsFiddle

Answer 2

Попробуйте это:

var idx = 1; 
setInterval(function() { 
    $('ul li').removeClass('current').eq(idx).addClass('current'); 
    idx++; 
    if (idx == $('ul li').length) idx = 0; 
}, 1000); 

jsFiddle example

Answer 3

var $li = $('ul li'), i = 0; 

setInterval(function(){ 
    i++; 
    if($li.length === i) i = 0; 
    $li.removeClass('current').eq(i).addClass('current') 
}, 1000); 

http://jsfiddle.net/mr7J6/

Answer 4

$(function(){ 
    move(); 
}); 


function move(){ 
    $("ul li.current").delay(1000).queue(function(next){ 
     $(this).removeClass('current'); 
     if($(this).next().addClass('current').length){ 
      move(); 
     } 

    }); 
} 

Answer 5

Если вам это нужно, чтобы обернуть вокруг, вы можете сделать это с помощью оператора модуль так:

$(document).ready(function() { 
    var targets = $('ul li'); 
    var len = targets.length; 
    var i = 0; 
    setInterval(function() { 
     // remove from current 
     $('li.highlight').removeClass('highlight'); 
     i = (i + 1) % len; 
     targets.eq(i).addClass('highlight'); 
    }, 1000); 
}); 

Demo