Question

我一直在寻找这个，虽然我遇到了一些类似的答案，但大多数似乎与HTML5有关。我正在寻找一个jQuery解决方案来创建一个由空<div>组成的NxN网格。

这就是我所说的，但我认为错误在于尝试在页面上显示2D数组。理想情况下，我希望在名为grid的数组中有一个X x Y网格，其元素最终可以使用。然而，这种方法给我带来了一些困难 - 我做错了什么？（注意我在这里使用＆＃39; X＆＃39;为了示例目的）

function draw_board(x,y){
    var grid=[];
    for (var j=0;j<x;j++){
        for(var i=0;i<y;i++){
            grid[j][i]='<div>X</div>'
        }
    }
    $('body').append(grid);
}

修改我在控制台中看到的具体错误是Uncaught TypeError: Cannot set property '0' of undefined，位于grid[j][i]='<div>X</div>'行。

答案：

如果其他人在将来偶然发现这种情况，下面有3个好的答案。

为了正确显示2D数组，请使用$('body').append(grid.join(''));而不是$('body').append(grid);
为了避免我看到的实际错误，请确保在尝试为item [0] [1]分配值之前初始化2D数组中的第一项。（即：在致电grid[j]=[];

grid[j][i]=[];

接受的答案立即解决了仅使用jQuery创建NxN网格的问题，包括附带的CSS。

Answer 1

我意识到这与您尝试做的事情略有不同，但您认为在这种情况下您可能会发现它很有用。

您可以为行中的每个div使用一个浮点数，然后使用带有style="clear:both"的div来开始新行。

以下是JSFiddle

中的代码

.box {
    float:left;
    width:100px;
    height:100px;
    margin-right:5px;
    margin-bottom:5px;
    background-color:#0000FF;
}

var $container = $("<div></div>").css("float","left");

for(var i = 0; i < 3; i++) {
    for (var j = 0; j < 4; j++){
        $("<div></div>").addClass("box").appendTo($container);
    }
    $("<div></div>").css("clear", "both").appendTo($container);
}

$container.appendTo($("body"));

Answer 2

您需要使用网格连接：

$('body').append(grid.join(''));

或者，您可以使用空对象而不是数组：

function draw_board(x,y){
    var grid = $();
    for (var j=0;j<x;j++){
        for(var i=0;i<y;i++){
            grid.add('<div>X</div>');
        }
    }
    $('body').append(grid);
}

Answer 3

这是因为网格是一维数组。当它试图访问grid [0] [i]时，它会给出错误，因为grid [0]是空的，而不是数组。

试试这个：

function draw_board(x,y){
    var grid=[];
    for (var j=0;j<x;j++){
        grid[j] = [];
        for(var i=0;i<y;i++){
            grid[j][i]='<div>X</div>'
        }
    }
    $('body').append(grid);
}

使用jQuery在屏幕上创建NxN网格

3 个答案: