Add a class to a list of items in sequence

Question

In my website I have a group/list of divs that will each contain an image. What I want to do is have a class added to each div one-by-one, in sequence. Once it has added the class to each div, then then it completes. So I don't want it to loop.

Here's the general HTML setup:

<div class="row">
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
</div>

So by the time the javascript has run its course, the html will look like this:

<div class="row">
   <div class="image active"></div>
   <div class="image active"></div>
   <div class="image active"></div>
</div>

I am currently using jQuery on the site, so a method to do that with jQuery would be preferred.

Thanks!

// EDIT

Let me add some more info so that what I'm trying to accomplish makes more sense. I know how to add a class, but, I don't want to add the .active class to each .image div all at once, it needs to happen one at a time so that there is almost a slight delay in between each one.

If anyone needs more clarification, I might post up an animated .gif or something to better describe what I want, but hopefully that helps!

Thanks again!

You say "in sequence", but not a loop? That's a bit confusing, so here's two options: If you don't want a loop, then `$(".row .image").addClass("active");`, if you want it in sequence, then `$(".row .image").each($(this).addClass("active"));` — random_user_name, Aug 29 '13 at 17:49
In sequence how exactly, adding classes would be done in nanoseconds, are you thinking of a timeout of some sort ? — adeneo, Aug 29 '13 at 17:49

Blazemonger · Accepted Answer · 2013-08-29T18:19:28.373

One way to get a delay is to use .each() and multiply the index argument of the callback by some constant:

$(".row .image").each(function(i,el) {
    var $this = $(this);
    setTimeout(function() {
            $this.addClass('active');
        }, i*1000); // milliseconds
});

http://jsfiddle.net/mblase75/AvXMM/

A second approach involves creating a recursive function that looks for the first in.active element:

function looper() {
    if ($('.row .image:not(".active")').first().addClass('active').length) {
        setTimeout(looper, 1000);
    };
};
looper();

http://jsfiddle.net/mblase75/qxEW7/

You can also use setInterval, but this approach means that the first element's addClass will be delayed, while in the above examples the first element has its class added immediately:

window.__interval = setInterval(function() {
    if (!$('.row .image:not(".active")').first().addClass('active').length) {
        clearInterval(window.__interval);
    };
},1000); // milliseconds

http://jsfiddle.net/mblase75/rgUJq/

Tim Mac · Answer 2 · 2013-08-29T18:06:40.297

2

You can just do this..

$(".row > .image").addClass('active');

Since you modified your question... if you grab all the images, then you can use setInterval to add a delay. Perhaps something like this may be what you're looking for. The delay here is 500 ms, obviously you can change that to whatever you'd like.

var images = $(".row > .image");
var count = 0, length = images.length;
var interval = setInterval(function(){
    if(count == length)
        clearInterval(interval);

    images.eq(count++).addClass('active');
}, 500)

edited Aug 29 '13 at 18:06

answered Aug 29 '13 at 17:48

Tim Mac

1,149
1
8
17

Excellent. This does exactly what I want too. Blazemonger's code is a bit more compressed so I marked that as accepted. But this works just as well. Thanks! – jkilp Aug 29 '13 at 18:12
fair enough - i feel like the jury is out on whether to use `setTimeout` or `setInterval` in these scenarios. – Tim Mac Aug 29 '13 at 18:14
here's a nice post explaining the difference: http://stackoverflow.com/a/731625/1167867 – Tim Mac Aug 29 '13 at 18:22

Farhan Ahmad · Answer 3 · 2013-08-29T17:54:51.733

0

You can use .each() to loop through each element and then use the .addClass() to add a class to that element in the loop.

$(".row .image").each(function(index) {
  $(this).addClass("image_" + index);
});

edited Aug 29 '13 at 17:54

answered Aug 29 '13 at 17:49

Farhan Ahmad

5,148
6
40
69

score 0 · Answer 4 · answered Aug 29 '13 at 17:50

0

You say "in sequence", but not a loop?

That's a bit confusing, so here's two options:

If you don't want a loop, then $(".row .image").addClass("active");,

if you want it in sequence, then $(".row .image").each($(this).addClass("active"));

answered Aug 29 '13 at 17:50

random_user_name

25,694
7
76
115

When I say "in sequence," what I mean is that I don't want all of the .image divs to have .active class applied to them at once. So it's one by one. First one gets .active, then the second one, then the third. Hopefully that makes a little more sense. Sorry about that. – jkilp Aug 29 '13 at 17:59

score -1 · Answer 5 · answered Aug 29 '13 at 17:49

-1

Use the addCLass() method from jQuery

$(".image").addClass("active");

Here's the documentation

answered Aug 29 '13 at 17:49

Nasser Al-Shawwa

3,573
17
27

Add a class to a list of items in sequence

5 Answers5