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

Question

我试图运行这个循环，目的是创建一个特定数量的列，并向每个列添加正方形。目标是在一个循环中完成所有这些，但是我的循环将运行一次，成功，然后退出。

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);时，它只创建了一个包含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控制台没有错误。我大部分是从这里那里得到的。出于某种原因，不可能运行这样的嵌套for循环吗？

Answer 1

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

您还应该在for循环中添加一个var，以避免全局变量。

是的，正如您所说的，不能在这两个循环中使用相同的变量。你自己找得真好！

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);
  }
}

Answer 2

在运行嵌套的for循环时，不能在这两个循环参数中使用相同的变量。在这种情况下，我使用了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);
  }