好的,所以我正在尝试使用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);
现场演示