Infinite each() loop in jQuery?

Question

I have a few separate headings:

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

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

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

And I'd like to be able to continuously loop over them, changing the text from black to red, and then back to black once the next heading has changed to red.

Here's what I have so far: it works once, however I cannot get it to re-loop succesfully:

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

I'd like to be able to manually set how long I wait in between each change, so an explanation would help a lot too!

Here's the jsFiddle.

use setInterval rather than setTimeout for starters maybe. — d'alar'cop
– d'alar'cop, Commented Sep 22, 2013 at 15:19
Sorry, don't you want it to keep going? Maybe I misunderstood. Never mind. — d'alar'cop
– d'alar'cop, Commented Sep 22, 2013 at 15:20

Itay · Accepted Answer · 2013-09-22 15:28:40Z

5

Here's a slightly different approach.

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

edited Sep 22, 2013 at 15:28

answered Sep 22, 2013 at 15:20

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krzysiek Over a year ago

$($headings.get(i)) mein got... Use $headings.eq(i) instead.

Itay Over a year ago

Sorry but what language is this?

Itay Over a year ago

It is and I've updated it because it is a good suggestion. But "mein got" doesn't look like English.

techfoobar · Accepted Answer · 2013-09-22 15:23:05Z

4

You can use recursion to do this elegantly.

// 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/

answered Sep 22, 2013 at 15:23

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

Infinite each() loop in jQuery?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related