按顺序将类添加到项目列表中答案

【问题标题】：Add a class to a list of items in sequence按顺序将类添加到项目列表中
【发布时间】：2023-03-07 13:26:01
【问题描述】：

在我的网站中，我有一个 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 或其他东西来更好地描述我想要什么，但希望这会有所帮助！

再次感谢！

【问题讨论】：

您说的是“按顺序”，但不是循环？这有点令人困惑，所以这里有两个选项：如果你不想要循环，那么$(".row .image").addClass("active");，如果你想要按顺序，那么$(".row .image").each($(this).addClass("active"));
按照顺序，添加类将在纳秒内完成，您是否在考虑某种超时？

标签： javascript jquery html sequence addclass

【解决方案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/

【讨论】：

嘭！做到了。谢谢！

【解决方案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)

【讨论】：

优秀。这也正是我想要的。 Blazemonger 的代码更加压缩，所以我将其标记为已接受。但这同样有效。谢谢！
很公平 - 我觉得在这些情况下是否使用 setTimeout 或 setInterval 尚无定论。
这里有一篇很好的文章解释了不同之处：stackoverflow.com/a/731625/1167867

【解决方案3】：

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

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

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

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

【讨论】：

当我说“按顺序”时，我的意思是我不希望所有的 .image div 都同时应用 .active 类。所以就一个一个。第一个获得 .active，然后是第二个，然后是第三个。希望这更有意义。对此感到抱歉。

【解决方案4】：

您可以使用@987654321@ 循环遍历每个元素，然后使用@987654322@ 在循环中向该元素添加一个类。

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

【讨论】：

【解决方案5】：

使用 jQuery 中的 addCLass() 方法

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

Here's 文档

【讨论】：