Jquery 基于延迟应用颜色

我有一套li，我想在每个li之间的延迟后为每个li设置背景色

例：如果1个李被涂成红色，那么经过一段时间的延迟（800），当前的有色李应该被删除，下一个李应该被涂上颜色，其余的应该继续

HTML

<ul>
    <li>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>

---

请纠正我的错误。

你可以这样做

var $li = $('ul li');

$li.each(function(i, li) {
    var that = $(this);

    setTimeout(function() {
        $li.removeAttr('style');

        that.css('background-color', 'red');
    }, i * 800);
});

• 您正在迭代所有

  ui

  元素，而我认为您希望迭代所有

  li

  元素
• 在迭代中，

  $（this）

  将引用当前索引中的元素，因此不需要在此处使用，或者更确切地说，您不能使用-

  eq（i）

  <代码>$（this）.css（…）就足够了

• .removeAttr

  不是动画。它不使用效果队列，因此不能以这种方式延迟。使用

  setTimeout

• 在更正了以上所有内容之后，您必须注意迭代将非常快地在所有元素中循环。设置的超时应该以某种方式解释这一点，例如，

  i*1000

  ，或者您的超时应该递归地调用自身并以这种方式推进循环，但这需要相当完整的重写

例如：

function highlight(list, index) {
    list.removeAttr('style').eq(index%list.length).css('background-color', 'red');
    setTimeout(highlight, 1000, list, ++index);
}

您可以尝试以下方法：

HTML:

JQuery：

$(document).ready(function () {
    setInterval(function(){
        var red = $('li.red');
        red.removeClass('red');
        var next = red.next();
        if(next.length > 0)            
            red.next().addClass('red');
        else
            $('li').first().addClass('red');
    },3000);
});

---

嘿，这一个很好：），但我只是在猜测，它可以用.delay和仍然优化的代码来完成吗，你能告诉我它可以不用setTimeout来完成吗？是的，当然，等一下。我上面发布的方法是我第一次想到的。编辑-使用

.delay（）

是不可能的

.delay（）

仅适用于基于队列的方法，如动画，而不适用于

css（）

或

removeAttr（）

。此外，使用

setTimeout（）

也没有什么错，因为jQuery内部使用

delay（）

就是这样。

<ul>
    <li class="red">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>

.red {background-color:red}

$(document).ready(function () {
    setInterval(function(){
        var red = $('li.red');
        red.removeClass('red');
        var next = red.next();
        if(next.length > 0)            
            red.next().addClass('red');
        else
            $('li').first().addClass('red');
    },3000);
});