Javascript 在生成html内容的for循环中放置换行符

我有一个生成一些HTML内容的for循环：

var boxes = "";

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
}

document.getElementById("id").innerHTML = boxes;

我想在一行中显示3个框，然后在它们下面显示一行中的2个框，然后是1，然后是3，2和1

---

首先，我考虑使用if语句来检查i>2是否添加换行符，但它也会在每个超过第三个的框之后添加换行符。我对javascript的基本知识告诉我，我必须为每一行创建一个循环。有什么建议吗？

我会使用不同的方法：

var boxes = "",
    boxesInRow = 3,
    count = 0;

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
    count++;
    if(count === boxesInRow) {
       boxes += "<br/>";
       boxesInRow -= 1;
       count = 0;
       if (boxesInRow === 0) {
           boxesInRow = 3;
       }
   }
}

document.getElementById("id").innerHTML = boxes;

使用数组存储每行的项目数：

var array = [3, 2, 1, 3, 2];

然后，使用两个循环来迭代

for(var i = 0; i < array.length; i++){
    //Start the row 
    for(var j = 0; j < array[i]; ++j){
        //create the item inline
    }
    //End the row 
}

在每次创建项目时，将id设置为

var id = 'boxes_inline_' + counter++;

并将此值添加到正在生成的项中

---

注意：这是我用来构建表单生成器的算法的一小部分。当然，数组包含更多的值和属性。但这为基于JSON构建表单提供了一个非常好的解决方案。您可以尝试以下方法：

主意 保留批量大小的数组 循环数组并检查迭代器是否与位置一致 如果是，则更新位置和索引以获取下一个位置 变量框=； var区间=[3,2,1]； var位置=间隔[0]； var指数=0； 对于i=0；i<11；i++{ 框+=； 如果位置-1==i{ 框+=； 索引=索引+1%间隔。长度； 位置+=间隔[索引] } } document.getElementByIdcontent.innerHTML=box； .盒子{ 显示：内联块； }

---

请参阅syntax->array->[3,2,1,3,2]不用担心，如果op需要有限的重复，您的解决方案是干净的：@AxelH只是一个指针，而不是重复[…，3,2]，使用mod运算符来重复模式。@Rajesh好吧，我使用这个解决方案是因为，是的，实际的模式可以用模来完成，但我保持通用性。如果模式变得随机，那么维护起来就更简单了。如果需要，可以使用模构建模式；但是，非常优雅的解决方案是，每个框都有不同的id，这将创建每行具有相同id的框。很抱歉，我的问题中没有包括这一点，但这也可以派上用场。你能解释一下array.length是什么吗？这似乎对我最合适。我的框实际上有一个float:left属性，但是我添加了一个带有clear:all属性的div来代替br，这两个属性都可以正常工作。

var id = 'boxes_inline_' + counter++;

 var i;
    var boxes = "";
    for (i = 0; i < boxes.length; i++) {
        boxes += "<div class=""><img src=""/></div>";
        function displayboxes() {
        "use strict";
        for (i = 0; i < boxes.length; i++) {
            out.appendChild(document.createTextNode(boxes[i] + "<br>"));
        }
    }
        displayboxes(boxes);