Question

我有一套li，我希望在每个li之间延迟后为每个li设置背景颜色。

例如：如果1 li是红色的，那么经过一段时间的延迟（800）后，应该删除当前的彩色li并且下一个li应该是彩色的，其余部分应该继续。

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>

的jQuery

$('ul').each(function(i, j){
    $(this).eq(i).css('background-color', 'red').delay(1000).removeAttr('style');
});

DEMO

请纠正我，我错了。

Answer 1

你可以这样做。

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

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

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

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

<强> JSFiddle

Answer 2

当我想要迭代所有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);
}

Demo

Answer 3

您可以试试这个http://jsfiddle.net/fpYdt/8/：

HTML：

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

添加了CSS：

.red {background-color:red}

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

根据延迟应用颜色

3 个答案: