爲什麼我的嵌套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循環嗎？

來源

2017-10-20 Matt Weber

你能爲此代碼創建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); 
    } 
}

來源

2017-10-20 05:37:29

爲什麼要避免使用片段？我處於（很可能是不正確的）理解下，對於這種類型的操作，使用片段性能會更好。謝謝！ –

@MattWeber我認爲這是唯一的「當它被用來插入*元素集合* **中多個地方的**」。 [來源]（https://stackoverflow.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); 
    }

來源

2017-10-20 05:30:57

爲什麼我的嵌套for循環for creatDocumentFragment運行外部for循環只有一次？

回答

相關問題