將類添加到具有循環中的setInterval的數組

Question

背景：我正在使用jQuery向列表中的每個<a>元素逐個添加類。我已經得到了addClass()部分工作 - 在.highlighted類添加到我的第一個<a>，然後取出並加入到第二等

問題：我一直沒能得到addClass()功能重複一旦到達最後的<a>元素。我知道從搜索的SO setInterval()是一種更好的方法來處理這個setTimeout()，我最初使用，但我還沒有想出如何指定該功能需要重複。任何幫助感謝！

HTML：

<a id="1">one</a> 
    <a id="2">two</a> 
    <a id="3">three</a> 
    <a id="4">four</a> 
    <a id="5">five</a> 

JS：

var index = 0; 
var $aArray = $('a'); 

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

    setInterval(function() { highlight(i+1) },2500); 
} 

highlight(0); 

Answer 1

一對夫婦的問題在這裏：

1. 你開始在每次調用一個新的setInterval()突出和永不停止前一個，所以你可以同時運行多個定時器。

2. 當你打開你的退貨聲明 - 你永遠不會突出顯示任何東西。

3. 包裝回到開始邏輯沒有正確實施。

使用%運算符實現數組打包通常最簡單。你可以做簡單的東西是這樣的：

function highlight(items, index) { 
    index = index % items.length; 
    items.removeClass("highlight"); 
    items.eq(index).addClass('highlight'); 
    setTimeout(function() {highlight(items, index + 1)}, 2500); 
} 

highlight($('a'), 0); 

工作演示：http://jsfiddle.net/jfriend00/VLR4n/