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控制台没有错误。我从here获得了大部分内容。由于某种原因，是不可能像这样运行嵌套的for循环？

Answer 1

运行嵌套for循环时，不能在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);
  }

Answer 2

您可以避免使用片段，只需将其附加到#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);
  }
}

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

2 个答案: