javascript - 用 DIV-Container 填充 2D Array 并显示它

Question

我想编写一个 4x4 游戏，需要创建 2D 数组来存储 Div-Container。我当前的代码是这样的:

$(function(){
var columns = 6;
var rows = 6;
var f = [];
var $square = $('<div class="squares"></div>');

for (var i = 0; i < columns; i++) {
    f[i] = [];
    for (var j = 0; j < rows; j++) {
        f[i][j] = $square;
    }
}
console.log(f);
    $('.board').appendTo(f);
});

在控制台中，我看到数组创建正确。但我无法显示它。它只显示类似:

[object Object],[object Object],[object Object],[object Object],[object
Object],[object Object][object Object],[object Object],[object Object],
[object Object],[object Object],[object Object][object Object],[object 
Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object 
Object],[object Object][object Object],[object Object],[object Object],
[object Object],[object Object],[object Object][object Object],[object 
Object],[object Object],[object Object],[object Object],[object Object]

正确显示生成的 DIV 的正确方法是什么？

Answer 1

通常您只想在数组中存储原始数据，然后有一个render 函数读取数组并渲染对象(在您的例子中看似正方形)

在您的示例中，您必须循环打印对象，因为您不是在告诉浏览器打印对象而是数组本身。

试试这个:

for(i=0;i<f.length;i++)
{
    for(j=0;j<f[i].length;j++)
    {
        $('.board').appendTo(f[i][j]);
    }
}