2013-11-21 3 views
-2

Цитирование через массив из 30 элементов и необходимость применения разных стилей каждые 1,2,3 и 4-й раз, когда цикл повторяется. Как я могу это сделать?javascript for loop every 1,2,3,4

for(var i = 0; i<arr.length; i++) { 

} 
+2

Я уверен, что это должно быть дубликатом, но я не могу найти. – Joe

ответ

3
for(var i = 0; i<arr.length; i++) { 
    switch (i % 4) { 
     case 0: ... ; break; 
     case 1: ... ; break; 
     case 2: ... ; break; 
     case 3: ... ; break; 
    } 
} 
+0

Это лучше, чем у меня ... –

+0

+1 за комментарий к комментарию – mauretto

0

Вы можете перебирать элементы с помощью счетчика и сбросить его каждый раз, когда вы попали в четвертый пункт ...

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++; 
} 
0

Вот скрипку, который делает то, что я думаю, что вы ищу

http://jsfiddle.net/cCdJw/

Вы можете использовать функцию, чтобы выяснить, п-й элемент, здесь мы переходим к максимальному значению (в вашем случае 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