为什么我的嵌套for循环for creatDocumentFragment运行外部for循环只有一次？

问题描述：

我试图运行这个循环用于创建列的特定量的目的，并添加广场到每一列。目标是在一个循环中完成这一切，但是我的循环将成功运行一次，然后退出。为什么我的嵌套for循环for creatDocumentFragment运行外部for循环只有一次？

function gridBuilder(columns,rows) { 
    var toAdd = document.createDocumentFragment(); 
    for (i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-'+i; 
    for (i = 1; i <= rows; i++) { 
     var row = document.createElement('div'); 
     row.id = 'card-'+i; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    toAdd.appendChild(column); 
    } 

    document.getElementById('card-container').appendChild(toAdd); 
}

了解你缺少HTML/CSS（这是很多）。为什么当我运行gridBuilder(5,4);时，它会创建只有1个4方块的列，如下所示。

<div id="card-container"> 

      <div id="card-column-1" class="card-column"> 
       <div id="card-1" class="card"></div> 
       <div id="card-2" class="card"></div> 
       <div id="card-3" class="card"></div> 
       <div id="card-4" class="card"></div> 
    </div> 
</div>

注： Chrome的控制台，没有错误。我从here中得到了大部分。由于某种原因，不可能像这样运行嵌套for循环吗？

你能为此代码创建plunker吗？ – VicJordan

我不知道什么是笨蛋，但我只是想通了......会发布一个答案，让其他小白人可以看到。 –

答

您可以避免使用片段，只需将其附加到#card-container。

您还应该添加在一个var for循环，以避免global variables。

是的，如你所说，你不能使用相同的变量都为循环。伟大的工作你自己找到！

function gridBuilder(columns, rows) { 
    container = document.getElementById('card-container'); 
    for (var i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-' + i; 
    for (var j = 1; j <= rows; j++) { 
     var row = document.createElement('div'); 
     row.id = 'card-' + j; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    container.appendChild(column); 
    } 
}

为什么要避免使用片段？我处于（很可能是不正确的）理解下，对于这种类型的操作，使用片段性能会更好。谢谢！ –

@MattWeber我认为这是唯一的“当它被用来插入*元素集合* **中多个地方的**”。 [来源]（https://*.com/questions/14203196/does-using-a-document-fragment-really-improve-performance）。看看[这个性能测试]（https://jsperf.com/fragment-vs-just-append）。 –

@MattWeber我认为你是对的！取决于你的电脑感觉如何，有时候比其他时候更快。 –

答

当运行一个嵌套循环中，您不能使用相同的变量都为循环参数。在这种情况下，我使用了两次i。我改变了第二个循环来使用j，现在它的工作原理......将这里留给别人。

function gridBuilder(columns,rows) { 
    var toAdd = document.createDocumentFragment(); 
    for (i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-'+i; 
    for (j = 1; j <= rows; j++) { 
     var row = document.createElement('div'); 
     row.id = 'card-'+j; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    toAdd.appendChild(column); 
    }

为什么我的嵌套for循环for creatDocumentFragment运行外部for循环只有一次？

相关推荐