Question

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

例如，我有一个包含12个值/对象的数组，我想将它们附加到html列表中，但是我想先将<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>"); }。

现在我正在使用：

{{1}}

它只是将对象中的项目附加到列表中。

可能很难描述我的意图，所以也许最好的方法是将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>");

javascript for循环如何计算每四个项目？

6 个答案:

JSFIDDLE：http://jsfiddle.net/TrueBlueAussie/E6qR7/5/