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

通常你只想在你的数组中存储原始数据，然后有一个渲染函数来读取数组并渲染对象（在你的情况下看似正方形）

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

试试这个：

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

Answer 2

您是否尝试将这些.squares附加到.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/

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

2 个答案: