Question

在我的网站上，我有一个div / group列表，每个div都包含一个图像。我想要做的是按顺序逐个添加到每个div的类。一旦它将类添加到每个div，然后它就完成了。所以我不希望它循环。

以下是一般的HTML设置：

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

所以当javascript运行时，html将如下所示：

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

我目前正在网站上使用jQuery，因此首选使用jQuery的方法。

谢谢！

//编辑

让我添加更多信息，以便我想要完成的更有意义。我知道如何添加一个类，但是，我不想一次性将.active类添加到每个.image div中，它需要一次发生一个，这样每个类之间几乎有一点延迟

如果有人需要更多澄清，我可能会发布一个动画.gif或其他内容来更好地描述我想要的东西，但希望这有帮助！

再次感谢！

Answer 1

获得延迟的一种方法是使用.each()并将回调的索引参数乘以某个常量：

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

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

第二种方法涉及创建一个递归函数，用于查找.active元素中的第一个：

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

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

你也可以使用setInterval，但这种方法意味着第一个元素的addClass将被延迟，而在上面的例子中，第一个元素立即添加了它的类：

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

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

Answer 2

你可以这样做..

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

由于您修改了问题...如果抓取所有图像，则可以使用setInterval添加延迟。也许这样的事情可能就是你要找的东西。这里的延迟是500毫秒，显然你可以把它改成你想要的任何东西。

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)

Answer 3

您可以使用.each()遍历每个元素，然后使用.addClass()在循环中向该元素添加一个类。

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

Answer 4

你说“按顺序”，但不是循环？

这有点令人困惑，所以这里有两个选择：

如果您不想要循环，那么$(".row .image").addClass("active");，

如果你想按顺序，那么$(".row .image").each($(this).addClass("active"));

Answer 5

使用jQuery中的addCLass()方法

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

Here's文档

按顺序将项添加到项列表中

5 个答案: