jQuery - итерация по всем классам в DOM, присвоение условия интервалами

Question

Хорошо, поэтому я пытаюсь использовать 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 

Answer 1

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

DEMO

Answer 2

Если имя класса вы хотите перебрать объекты для это "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(); 

Answer 3

Вы можете попробовать кэширование ваших цветов в массиве, а затем с помощью .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]); 

}); 

... или что-то подобное.

Answer 4

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

} 

setInterval(doIt, 500);​ 

Live DEMO