每运行1个外部循环一个运行嵌套循环

Question

我需要12次外循环，每个外循环1次内循环

 for (let i = 0; i <= blocksForRow; i++) {
    const random = Math.floor(Math.random() * 5);
    const block = document.createElement('div');
    block.classList.add('blocks__block')
    block.style.background = randomColors[random]
    fragmentForBlocks.appendChild(block)


    for (let x = 0; x <= blocksForColumn; x++) {
      const block = document.createElement('div');
      block.classList.add('blocks__block')
      block.style.background = 'red'
      fragmentForBlocks.appendChild(block)
    }

例如：

First iteration outer loop --> x iterations of inner loop
Second iteration outer loop --> x iterations of inner loop

等

但现在我的内循环在第一次迭代的外循环上运行。

请帮助我如何使用for循环执行此操作。

Answer 1

for (let i = 0; i <= blocksForRow; i++) {
  const random = Math.floor(Math.random() * 5);
  const block = document.createElement('div');
  block.classList.add('blocks__block')
  block.style.background = randomColors[random]

  for (let x = 0; x <= blocksForColumn; x++) {
    const cell = document.createElement('div');
    cell.classList.add('blocks__block')
    cell.style.background = 'red'
    block.appendChild(cell) // append the cell to the row
  }
  fragmentForBlocks.appendChild(block) // append the row
}

试试这个。它应该对你有用。以下是您在上述代码中所做的操作

• 创建一个div并将x单元格附加到内部循环中的div中
• 创建一行并附加内部循环div

Answer 2

我认为你的循环工作正常。然而，您只需将appendChild添加到fragmentForBlocks，这就是为什么每个块只会将自身添加到第一行。

也许这能解决你的问题。

for (let i = 0; i <= blocksForRow; i++) {
  const random = Math.floor(Math.random() * 5);
  const row = document.createElement('div');     // create a row
  row.classList.add('blocks__block')
  row.style.background = randomColors[random]
  fragmentForBlocks.appendChild(row)            // append row to a thing.

  for (let x = 0; x <= blocksForColumn; x++) {
    const block = document.createElement('div');
    block.classList.add('blocks__block')
    block.style.background = 'red'
    row.appendChild(block);                      // append block to a row
  }
}

Answer 3

也许您可以在外部循环中设置一个var column=blocksForColumn，如下所示：

 for (let i = 0; i <= blocksForRow; i++) {
    var column = blocksForColumn; // added
    const random = Math.floor(Math.random() * 5);
    const block = document.createElement('div');
    block.classList.add('blocks__block')
    block.style.background = randomColors[random]
    fragmentForBlocks.appendChild(block)

    //changed blocksforColumn to column
    for (let x = 0; x <= column; x++) {
      const block = document.createElement('div');
      block.classList.add('blocks__block')
      block.style.background = 'red'
      fragmentForBlocks.appendChild(block)
    }
 }