jqueryで動的グリッドを作成する

Question

jqueryを使用して動的グリッドを作成しようとしていますが、最終的にユーザー入力（16x16,32x32など）によって変更されます。私の論理は、各行内に16行と16個の正方形を作成することですが、正方形に正しい量を追加するのに問題があります。ここで

$(document).ready(function() { 
    for (var i = 0; i < 16; i++) { 
     $('.grid').append("<div class = 'row'></div>"); 
     //$('.row').width(($('.square').width().val() * i); 
     //for (var i = 0; i < 16; i++) { 
      $('.row').append("<div class='square'></div>"); 
    // } 
    } 
}); 

は、それがどのように見えるかへのリンクです：https://lettda.github.io/EtchAsketch/

Answer 1

ループの外側の外側のループのためのあなたの内を移動するなど、正方形の適量を作成する必要があります。

明示的に幅を設定

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class = 'row'></div>"); // Each grid gets 16 rows 
} 

for (var i = 0; i < 16; i++) { 
    $('.row').append("<div class='square'></div>"); // Each row gets 16 squares 
} 

を行は必要ありません。追加する余白/余白に、自動的に正方形の幅の16倍になります。すべての四角形がCSSに並んでいることを確認するには、display: inline-block;が必要です。また、各行に正方形が多すぎる場合、または正方形が広すぎる場合は、行が折り返されます。

Answer 2

.rowは、あなたが最後に作成された行に.squarediv Sを付加していないことを意味クラスrowを持つすべての要素を選択します以前に作成したすべてのものにもそれらを追加しています。

これを防ぐには、次のようにします。

for (var i = 0; i < 16; i++) { 
    var row = $("<div class = 'row'></div>"); 
    for (var j = 0; j < 16; j++) { 
     var square = $("<div class='square'></div>"); 
     row.append(square); 
    } 
    $('.grid').append(row); 
} 

OR

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class='row' id='row"+i+"'></div>"); 
    for (var j = 0; j < 16; j++) { 
     $('#row'+i).append("<div class='square'></div>"); 
    } 
}