用 DIV-Container 填充 2D 数组并显示它

Question

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

$(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]);
    }
}

Answer 2

您是否尝试将这些 .squaress 附加到 .board 中？

如果是这样，我想你需要append。不是appendTo。此外，您不能通过 jQuery 将数组附加到元素。试试$()：

var columns = 6;
var rows = 6;

var $columns = $();

for (var i = 0; i < columns; i++) {
    var $row = $();
    for (var j = 0; j < rows; j++) {
        $row = $row.add('<div class="squares">' + i + ',' + j + '</div>');
    }
    $columns = $columns.add($row);
}

$('.board').append($columns);

工作演示：https://jsfiddle.net/shuding/1bd5bvz5/