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

你需要用 「：第n個孩子」 連同 「我」

Answer 2

Demo

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

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

    }, 1000); 

Answer 3

我發現的兩個問題：

使用索引時，索引從零開始，而不是一個。

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

嘗試

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

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

演示：Fiddle