使用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 $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 3

试试这个：

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

jsFiddle例子

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);
});

演示

Answer 6

使用jQuery单击事件添加和删除类unorder list current class。 **

工作实例

**

 $(document).on('ready', function() { $('.list-1 li').each(function(){ var t = $(this); t.find('a').click(function(){ $('li.current').removeClass('current'); t.addClass('current'); }); }); }); 

  .list-1 li a{text-decoration:none; color:#444; background:#ddd; padding:5px 15px 10px;} .list-1 li.current a{background:tomato; color:#fff;} .list-1{display:flex; flex-wrap:wrap;min-width:140px} .list-1 li{padding:5px;margin:0 0 15px;display:block;} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-inline list-1"> <li class="current"><a href="#">Exapmle 1</a></li> <li><a href="#">Exapmle 2</a></li> <li><a href="#">Exapmle 3</a></li> <li><a href="#">Exapmle 4</a></li> <li><a href="#">Exapmle 5</a></li> <li><a href="#">Exapmle 6</a></li> <li><a href="#">Exapmle 7</a></li> <li><a href="#">Exapmle 8</a></li> <li><a href="#">Exapmle 9</a></li> </ul>