CODEWITHSUNDEEP
javascriptjqueryhtmlsequenceaddclass
jkilp
jkilp

Reputation: 317

Add a class to a list of items in sequence

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!

Upvotes: 3

Views: 3126

Answers (5)

Blazemonger
Blazemonger

Reputation: 92903

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/

Upvotes: 4

Tim Mac
Tim Mac

Reputation: 1149

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)

Upvotes: 2

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

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

Upvotes: 0

random_user_name
random_user_name

Reputation: 26160

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

Upvotes: 0

Nasser Al-Shawwa
Nasser Al-Shawwa

Reputation: 3653

Use the addCLass() method from jQuery

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

Here's the documentation

Upvotes: -1

Related Questions