javascript - 按顺序将类添加到项目列表

Question

在我的网站上，我有一个 div 组/列表，每个 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/

---

第二种方法涉及创建一个递归函数来查找第一个 in.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/