jQuery - 向數組中的元素添加類延遲

Question

我有一個數組，其中包含我的頁面中的一些元素。

現在我需要一個函數來識別數組，併爲每個元素添加一個類bold。問題是，一旦課堂被添加，一段時間必須通過。然後bold必須被刪除，並需要應用到下一個元素，導致「波」運動。

我一直試圖做這樣的：

$.each(tdArr, function(i, v) { 
    v.addClass("bold"); 
    setTimeout(function(){ 
    v.removeClass("bold"); 
    }, 900) 
}) 

與該代碼的問題是，bold在一次加入到所有元素會從所有 900個ms後取出，再元素在同一時間。

要在單獨的操作之間添加延遲，我需要做些什麼？

Answer 1

我認爲你需要稍微不同的方法處理這一點，因爲setTimout回報立竿見影，它不會停止下一個元素被設置爲粗體。

你可以用這樣的方法做：

function bold(i){ 
    if(i>0){ 
     $tdArr.eq(i-1).removeClass('bold'); 
    } 
    if(i == $tdArr.length){ 
     return; 
    } 
    $tdArr.eq(i).addClass('bold') 

    setTimeout(function() { bold(i+1) },900); 
} 

然後調用它你只需要調用bold(0)：

活生生的例子：http://jsfiddle.net/rJGjZ/

Answer 2

試試這個：

$.each(tdArr, function(index, element) { 
    var $elem = $(element); 
    $elem.addClass("bold"); 
    setTimeout(function(){ 
    $elem.removeClass("bold"); 
    }, 900) 
}) 

第二個參數是不是一個jQuery的元素，你需要轉換他

Answer 3

增加延遲在迭代數組時，確保在jQuery中包裝元素（如果尚未包裝的話）。如果它是jQuery元素的集合，則使用each來迭代。

var delay = 900 

$els.each(function(){ 
    var $this = $(this) 
    setTimeout(function(){ 
    $els.removeClass('bold') 
    $this.addClass('bold') 
    }, delay+=900) 
}) 

否則，我會使用for並將元素包裝在jQuery中。

for (var i=0, l=arr.length, d, prev; i<l; i++; d+=900) { 
    prev = arr[i-1] 
    setTimeout(function(){ 
    if (prev) $(prev).removeClass('bold') 
    $(arr[i]).addClass('bold') 
    }, d) 
} 

Answer 4

會是這樣的工作嗎？

function Bold(element) { 
    $(element).addClass("bold"); // we bold the current tdArr 
    setTimeout(function(){ 
    var nextSibling = $(element).next("td") // (if the tdArr are "td" tags) we find the next td brother of this one 
    if (!!nextSibling) Bold(nextSibling); // if there is a brother, repeat the function on him after 900ms 
    }, 900) 
} 

Bold(myfirsttd);