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

我们在index % max加1，开始我们的项目计数为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

javascript for循环每1,2,3,4

3 个答案: