javascript for for each every 1,2,3,4

Question

循环遍历由30个元素组成的数组，并且需要在循环迭代的每个1,2,3和4时间应用不同的样式。我会怎么做？

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

} 

Answer 1

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

Answer 2

你可以遍历一个柜台的元素，每次重置你打的第四个项目...

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

Answer 3

这里是一个小提琴，做什么，我觉得你寻找

http://jsfiddle.net/cCdJw/

您可以使用一个函数计算出的第n个项目，在这里我们传递一个最大值（在你的情况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来编程，但是如果你正在用现代浏览器来处理CSS中的第n个子类伪类，这可能会更好。快来看看这里对更多的信息：

http://reference.sitepoint.com/css/understandingnthchildexpressions