2D配列をDIVコンテナで塗りつぶして表示する

Question

4x4ゲームをプログラムしたいので、Divコンテナを格納するために2D配列を作成する必要があります。現在のコードは次のとおりです：

$(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

あなたは.boardにそれら.squares Sを追加しようとしていますか？

もしそうなら、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/