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

Answer 2

您需要将“：nth-child”与“i”结合使用

Answer 3

Demo

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

        $("ul li").eq(i).toggleClass('test');
        i++;
        if (i === 4) {
            i = 0;
        }

    }, 1000);

Answer 4

尝试

var i = 0, $lis = $("ul li");
var id = setInterval(function () {
    $lis.eq(i).toggleClass('test');
    i++;

    i = i % $lis.length;
}, 1000);

演示：Fiddle

获取setInterval以处理html列表项中的子元素

4 个答案: