javascript - 让 setInterval 处理 html 列表项中的子元素

Question

我正在使用 setInterval() 方法尝试将一个类应用于每个单独的 li。

我创建了一个应用 toggleClass 的 jsFiddle，但我无法让它一个一个地应用该类。

下面是我的 javaScript，我还添加了一个指向 jsFiddle 的链接:

var i = 1;
var id = setInterval(function () {
    $("ul").children(i).toggleClass('test');
    i++;
    if (i === 4) {
        i = 1;
    }
}, 1000);

http://jsfiddle.net/Svx3n/42/

Answer 1

我发现的两个问题:

使用索引时，索引从零开始，而不是一。

.children(\[selector\])不带索引，它带选择器。所以你要求 jQuery 找到一个类型的元素。而是使用 .eq(index) 来获取元素。

因此对您的代码所做的更改将是:

var i = 0;
var id = setInterval(function () {

    $("ul").children().eq(i).toggleClass('test');

    i++;

    if (i === 4) {
        i = 0;
    }

}, 1000);

更好的是，将选择移出，这样您就不会在每次迭代时都查询 DOM

var i = 0,
    lis = $("ul").children(),
    id = window.setInterval( function () {    
            lis.eq(i).toggleClass('test');    
            i++;    
            if (i === 4) {
                i = 0;
            }    
         }, 1000);