javascript - 嵌套for循环只执行一次

Question

我正在使用 JavaScript 和 jQuery 创建一个简单的 40x40 网格。

这是我的嵌套 for 循环来执行此操作:

function display_grid() {
  browser_grid = ''
  $visible_grid = $('#grid');

  for (i = 0; i < 40; i++) {
    $visible_grid.append('<div>');
    for (i = 0; i < 40; i++) {
      $visible_grid.append("<div class='square'> </div>");
    }
    $visible_grid.append('</div>');
  }
}

我希望这会创建 40 个 div，每个 div 内有 40 个 div。浏览器仅显示一行 40 div。

<div>
    <div class="square></div>
    <div class="square></div>
    <div class="square></div>
    ...
</div>

这就是我想要它做的事情，但是四十次。我对 JS 不太有经验，所以我很困惑为什么第一个循环没有执行 40 次。

Answer 1

您需要为内部循环使用不同的变量名称。

function display_grid() {
    browser_grid='';
    $visible_grid = $('#grid');

    for(var i=0; i<40; i++){
        $visible_grid.append('<div>');
        for(var j=0; j<40; j++){
            $visible_grid.append("<div class='square'> </div>");
        }
        $visible_grid.append('</div>');
    }

编辑:添加了代码。 请注意，您应该使用 var 关键字来计算 for 循环中的变量数量。

代码中发生的情况是，创建 40 个内部 div 后，计数器 i 为 40，并且外部循环的条件不再为 true，因此退出该代码块。