Цитирование через массив из 30 элементов и необходимость применения разных стилей каждые 1,2,3 и 4-й раз, когда цикл повторяется. Как я могу это сделать?javascript for loop every 1,2,3,4
for(var i = 0; i<arr.length; i++) {
}
Цитирование через массив из 30 элементов и необходимость применения разных стилей каждые 1,2,3 и 4-й раз, когда цикл повторяется. Как я могу это сделать?javascript for loop every 1,2,3,4
for(var i = 0; i<arr.length; i++) {
}
for(var i = 0; i<arr.length; i++) {
switch (i % 4) {
case 0: ... ; break;
case 1: ... ; break;
case 2: ... ; break;
case 3: ... ; break;
}
}
Это лучше, чем у меня ... –
+1 за комментарий к комментарию – mauretto
Вы можете перебирать элементы с помощью счетчика и сбросить его каждый раз, когда вы попали в четвертый пункт ...
var count = 0;
for(var i = 0; i<arr.length; i++) {
switch(count)
{
case 0:
// 1stitem
break;
case 1:
// 2nd item
break;
case 2:
// 3rd item
break;
case 3:
// 4th item
count = 0;
break;
}
count++;
}
Вот скрипку, который делает то, что я думаю, что вы ищу
Вы можете использовать функцию, чтобы выяснить, п-й элемент, здесь мы переходим к максимальному значению (в вашем случае 4), чтобы позволить нам снова сбрасывать 0 после каждого четвертого элемента. Чтобы узнать больше о модуль взглянуть на эту статью в википедии http://en.wikipedia.org/wiki/Modular_arithmetic
function nthItem(index, max) {
// this will tell us which item the element is, given a maximum to repeat the nth modulus "loop" over.
return index % max + 1;
}
Добавим 1 к index % max
, чтобы начать рассчитывать наш пункт на 1, а не 0.
var arr = ["hello", "hola", "molo", "halo", "tere", "bonjour", "ciao", "ola", "hej"];
for(var i = 0; i< arr.length; i++) {
var n = nthItem(i, 4),
cssClass,
thisGreeting;
switch(n) {
case 1 :
cssClass = "greeting-1";
break;
case 2 :
cssClass = "greeting-2";
break;
case 3 :
cssClass = "greeting-3";
break;
case 4 :
cssClass = "greeting-4";
break;
}
thisGreeting = document.createElement("div");
thisGreeting.innerHTML = arr[i];
thisGreeting.setAttribute("class", cssClass);
document.getElementById("greetings").appendChild(thisGreeting);
}
В приведенном выше коде добавьте другой класс CSS для стилирования каждого элемента в массиве в соответствии с его положением.
Важно знать, что вы можете сделать это программно с помощью JavaScript, но, вероятно, гораздо лучше, если вы работаете с современными браузерами, чтобы сделать это с n-м дочерним псевдоклассом в CSS. Возьмите взгляд здесь для получения дополнительной информации о том, что:
http://reference.sitepoint.com/css/understandingnthchildexpressions
Я уверен, что это должно быть дубликатом, но я не могу найти. – Joe