嵌套for循环只执行一次

时间:2015-10-02 23:36:12

标签: javascript jquery html

我使用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次。

2 个答案:

答案 0 :(得分:4)

内循环需要一个不同的变量名。

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,外部循环的条件不再为真,从而退出该代码块。

答案 1 :(得分:0)

感谢帮助人员!

为我的内循环更改了变量修复了问题,但使用.append()

时出现问题

显然它不支持部分标记,所以我只是将所有div添加到字符串中。

for(var i=0;i<40;i++){
            browser_grid+='<div>';
            for(var x=0;x<40;x++){
                browser_grid+="<div class='square'> </div>";
            }
            browser_grid+='</div>';
        }

        $visible_grid.append(browser_grid)

之后,我将字符串附加到$ visible_grid

这似乎做了我想要的事情。只是想为其他人使用append方法指出它。