jQuery - 遍历 DOM 中的所有类，按间隔分配条件

jQuery - iterating over all the classes in the DOM, assigning a condition by intervals

本文关键字：条件 分配 遍历 DOM jQuery      更新时间：2023-09-26

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

演示

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

。或类似的东西。

如果要迭代对象的类名是"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();

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

现场演示

相关文章：