Бесконечный цикл each() в jQuery?

Question

У меня есть несколько отдельных рубрик:

<h3 class="ads">First</h3> 

<h3 class="ads">Second</h3> 

<h3 class="ads">Third</h3> 

И я хотел бы, чтобы иметь возможность непрерывно циклично над ними, изменяя текст от черного до красного, а затем обратно в черный, как только следующий заголовок изменен на красный.

Вот что я до сих пор: он работает один раз, но я не могу получить его повторно цикл успешно:

$('.ads').each(function(i) { 
    var el=$(this); 
    setTimeout(function() { 
     el.prevAll('.ads').css('color','black'); 
     el.css('color', 'red'); 
    }, i * 3000); 
}); 

Я хотел бы, чтобы иметь возможность вручную установить, как долго я ждать между каждым измените, поэтому объяснение тоже поможет!

Here's the jsFiddle.

Answer 1

Вот несколько иной подход.

jsFiddle Demo

var $headings = $('.ads'), 
    $length = $headings.length, 
    i = 0; 

setInterval(function() { 
    $headings.css('color','black'); 
    $headings.eq(i).css('color', 'red'); 
    i = (i + 1) % $length; 
}, 3000); 

Answer 2

Вы можете использовать рекурсию, чтобы сделать это элегантно.

// configure the delay 
var delay = 1000; 

// save a pointer to the first element 
var first = $('.ads').first(); 

// this function does the following 
// a. color the current element red 
// b. make all siblings black 
// c. call itself with the next applicable element 
function change(_elem) { 
    _elem.css('color','red').siblings().css('color', 'black'); 
    setTimeout(function() { 
     change((_elem.next().length > 0) ? _elem.next() : first); 
    }, delay); 
} 

// start if off 
change(first); 

Demo: http://jsfiddle.net/gNrMJ/16/