Javascript jQuery—迭代DOM中的所有类，按时间间隔分配条件

好的，所以我尝试使用jQuery（或者Javascript作为一个整体，对我来说并不重要，但是没有其他Javascript框架）来迭代文档中给定的类

我想知道，有没有一种jQuery特定的方法来实现它，或者我应该使用Javascript

基本上，一个类有X个实例。我想迭代DOM中类的所有实例，并在每次增量时为该元素指定不同的颜色（可能通过在div中插入一个样式标记，这样原始CSS就不会成为问题），最多五种颜色，此时下一次迭代将给出第一种颜色，并继续处理，等等

伪代码：

for x in elements
elements[0].inserttag('style = "#color0"')
elements[1].inserttag('style = "#color1"')
elements[2].inserttag('style = "#color2"')
elements[3].inserttag('style = "#color3"')
elements[4].inserttag('style = "#color4"')
elements[5].inserttag('style = "#color5"')
Repeat for elements[6] and beyond, starting with color0

要处理时间间隔，请执行以下操作：

var i = 0,
    colors = ['red', 'blue', 'orange', 'green', 'black'];

function setColor() {
    $('.your_class').eq(i).css('color', colors[i % colors.length]);
    i++;
    setTimeout(function() {
        setColor();
    }, 2000)
}

setColor();

---

如果要迭代对象的类名为“foo”，则可以使用以下jQuery：

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
$(".foo").each(function(index, el) {
    el.style.color = colors[index % colors.length];
});

在纯javascript中，这也非常简单：

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
var items = document.getElementsByClassName('foo');
for (var i = 0, len = items.length; i < len; i++) {
    items[i].style.color = colors[i % colors.length];
}

var colors=['color0'，'color1'，'color2'，'color3'，'color4'，'color5']；
var items=document.getElementsByClassName（'foo'）；
对于（变量i=0，len=items.length；i

如果您试图在一段时间间隔内周期性地应用这些颜色值（您的问题在这一部分中不清楚），那么您可以这样做：

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
var items = document.getElementsByClassName('foo');
var i = 0;
function nextColor() {
    if (i < items.length) {
        items[i].style.color = colors[i % colors.length];
        i++;
        setTimeout(nextColor, 2000);
    }
}
nextColor();

var colors=['color0'，'color1'，'color2'，'color3'，'color4'，'color5']；
var items=document.getElementsByClassName（'foo'）；
var i=0；
函数nextColor（）{
如果（i<项目长度）{
项目[i].style.color=colors[i%colors.length]；
i++；
设置超时（nextColor，2000）；
}
}
nextColor（）；

您可以尝试在数组中缓存颜色，然后使用

.each（）

迭代每个元素：

var colors = ['red','white','blue','green','yellow'];
$('.someclass').each(function(i,v) {

    // i is the iteration count,

    $(this).css('color', colors[i % colors.length]);

});

。。。或者类似的东西

var colors = ['red', 'blue', 'orange', 'green', 'black'];
var index = 0;
function doIt(){
    $('.foo').css('color', colors[index++ % colors.length]);

}

setInterval(doIt, 500);​

---

两件事。你没有处理好间歇期的事情。当使用

css

时，你不能使用

每一个

，你的间隔只运行在前6个对象上，然后停止。当然，它完全不起作用。它似乎甚至没有插入到页面的CSS中。如果您打算在解决方案中加入时间元素（例如，在某个时间间隔内应用的样式），那么您需要澄清问题的这一部分，因为目前提供的答案试图猜测您的意思。你的问题在这方面不是很清楚。这根本不是我想要的。@AndrewAlexander。你想要什么？你知道他想要什么吗？我错过了什么吗？@gdoron——问题标题中提到的

interval

完全不清楚它的意思。我提供了一种简单的方法，可以在具有相同类的一系列对象上设置交替样式。如果OP想要的不止这些，他们应该澄清他们的问题，我已经在最初的问题中添加了一条评论。

var colors = ['red', 'blue', 'orange', 'green', 'black'];
var index = 0;
function doIt(){
    $('.foo').css('color', colors[index++ % colors.length]);

}

setInterval(doIt, 500);​