JavaScript用于循环如何计算每四个项目

Question

我想知道如何在javaScript中计算循环中的项目，

例如，我的数组具有12个值/对象，我想将它们附加到HTML中，但我想将befeore添加到每一个<hr>标签，并且在每个第四个<br>之前。

现在我正在使用：

var buttons = [ {"tag":"adr","color":"#123456"},
           {"tag":"ag","color":"#123456"},
           {"tag":"fax","color":"#123456"},
           {"tag":"ind","color":"#123456"},
           {"tag":"sname","color":"#123456"},
           {"tag":"per","color":"#123456"},
           {"tag":"tel","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"close","color":"#123456"} ];
for (var i = 0; i < buttons.length; i++){
    var tag = buttons[i].tag;
    var color = buttons[i].color;
    $(".list").append("<li>"+ tag + ", " + color +"</li>");
}

，它只是将项目从对象附加到列表。

也许很难描述我的意图，所以最好的方法是将jsfiddle链接放在左列表是我当前的情况，而右边是我想像它看起来像：http://jsfiddle.net/e6qr7/

到目前为止，我还没有找到任何类似的特定示例，最好的方法是什么？我需要以某种方式使用迭代器，检查他的循环或其他东西

Answer 1

您可以尝试此

if (i && (i % 4 === 0)) {
    $('.list').append('<hr>');
}

demo

Answer 2

许多其他答案是正确的，但所需的最低表达方式是：

    if (i && !(i % 4))
    {
        $('.list').append('<hr>');
    }

我注意到所有其他答案（包括上面的我）没有生成有效的HTML，因此我建议使用样式并在lis 上注释类：

jsfiddle：http：//jsfiddle.net/trueblueaussie/e6qr7/5/

var buttons = [ {"tag":"adr","color":"#123456"},
               {"tag":"ag","color":"#123456"},
               {"tag":"fax","color":"#123456"},
               {"tag":"ind","color":"#123456"},
               {"tag":"sname","color":"#123456"},
               {"tag":"per","color":"#123456"},
               {"tag":"tel","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"close","color":"#123456"} ];
    for (var i = 0; i < buttons.length; i++){
        var tag = buttons[i].tag;
        var color = buttons[i].color;
        var $li = $("<li></li>");
        if (!(i % 4)) {
            $li.addClass('line');
            if (i){
                $li.addClass('break');
            }
        }
        $li.append(tag + ", " + color);
        $(".list").append($li);
    }

这也显示了创建元素和填充元素的另一种方法（仅为清晰）

Answer 3

http://jsfiddle.net/e6qr7/3/

    if(i % 4 == 0) {
        $(".list").append("<hr />");
    }

Answer 4

使用JavaScript模量：

for (var i = 0; i < buttons.length; i++){
    var tag = buttons[i].tag;
    var color = buttons[i].color;
    if (i % 4 == 0)
        $(".list").append("<hr>");
    $(".list").append("<li>"+ tag + ", " + color +"</li>");
}

我认为您可以自己修改，以包括＆lt; br＆gt;标签;）

Answer 5

类似的东西会起作用：

    for (var i = 0; i < buttons.length; i++){
        var tag = buttons[i].tag;
        var color = buttons[i].color;
        if ( i == 0 ) {
            $(".list").append("<hr />");                    
        }
        else if ( i % 4 == 0 ) {
            $(".list").append("<br /><hr />");        
        }
        $(".list").append("<li>"+ tag + ", " + color +"</li>");
    }

http://jsfiddle.net/e6qr7/4/

Answer 6

您应该使用modulo（％）。

if (i%4==0) $(".list").append("<hr>");
if (i%4==3) $(".list").append("<br>");