javascript - Add a class to a list of items in sequence - Stack Overflow

admin管理员组

文章数量:1405564

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 pletes. 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 acplish 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!

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 pletes. 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 acplish 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!

• javascript
• jquery
• html
• sequence
• addclass

Share Improve this question Follow edited Aug 29, 2013 at 18:02 jkilp asked Aug 29, 2013 at 17:46 jkilpjkilp 31722 gold badges77 silver badges1717 bronze badges 2

• 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 Commented Aug 29, 2013 at 17:49
• 1 In sequence how exactly, adding classes would be done in nanoseconds, are you thinking of a timeout of some sort ? – adeneo Commented Aug 29, 2013 at 17:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

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)

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

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

Use the addCLass() method from jQuery

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

Here's the documentation

本文标签： javascriptAdd a class to a list of items in sequenceStack Overflow