将课程添加到顺序中的项目列表中

在我的网站中，我有一组div/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或更好的描述我想要的东西，但希望这有助于！

再次感谢！

来源

2013-08-29 jkilp

你“按顺序”之称，但不是一个循环？这有点令人困惑，所以这里有两个选择：如果你不想要循环，那么'$（“。row .image”）。addClass（“active”）;'，如果你想要的顺序，那么'$ （“.row .image”）。each（$（this）.addClass（“active”））;' –

按照顺序，如何在纳秒级中添加类，您是否想过某种类型的超时？ – adeneo

的一种方式得到的延迟是使用.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将被延迟，而在上面的示例中，t他第一个元素同级车立即补充：

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

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

来源

2013-08-29 18:08:48 Blazemonger

Bam！那样做了。谢谢！ – jkilp

你可以做这个..

$(".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)

来源

2013-08-29 17:48:37

非常好。这也正是我想要的。 Blazemonger的代码更加压缩，所以我将其标记为已接受。但是，这同样适用。谢谢！ – jkilp

够公平 - 我觉得陪审团已经决定是否在这些场景中使用'setTimeout'或'setInterval'。 –

这里有一篇不错的文章解释了这个区别：http://stackoverflow.com/a/731625/1167867 –

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

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

来源

2013-08-29 17:49:45

-1

从jQuery的

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

Here's文档

来源

2013-08-29 17:49:50

你说 “按顺序”，而不是循环使用addCLass()方法？

这是一个有点混乱，所以这里的两个选项：

如果你不想一环，然后$(".row .image").addClass("active");，

如果你想让它按顺序排列，然后$(".row .image").each($(this).addClass("active"));

来源

2013-08-29 17:50:03

当我说“按顺序”时，我的意思是我不想要所有的.image div都有。主动类一次应用到他们。所以它是一个接一个的。第一个获得.active，然后是第二个，然后是第三个。希望这样做更有意义。对于那个很抱歉。 – jkilp

将课程添加到顺序中的项目列表中

回答

相关问题