javascript - 为什么 createDocumentFragment 的嵌套 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); 时，它只创建 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 循环？

Answer 1

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

您还应该在 for 循环中添加 var 以避免 global variables .

是的，正如您所说，您不能在两个 for 循环中使用相同的变量。自己找到它真是太棒了!

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