-1

好的，所以我正在尝试使用 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
4

4 回答 4

2 
var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];

$('.your_class').each(function(i) {
  $(this).css('color', colors[i  % colors.length]);
});

处理间隔：

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();

演示

于 2012-06-11T17:10:41.173 回答
1

如果您要为其迭代对象的类名是“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');
var i = 0;
function nextColor() {
    if (i < items.length) {
        items[i].style.color = colors[i % colors.length];
        i++;
        setTimeout(nextColor, 2000);
    }
}
nextColor();
于 2012-06-11T17:11:46.120 回答
1

您可以尝试将颜色缓存在一个数组中，然后使用.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]);

});

...或类似的东西。

于 2012-06-11T17:11:58.640 回答
0 
var colors = ['red', 'blue', 'orange', 'green', 'black'];
var index = 0;
function doIt(){
    $('.foo').css('color', colors[index++ % colors.length]);

}

setInterval(doIt, 500);​

现场演示

于 2012-06-11T17:12:16.487 回答