JavaScript設定変数を使用したCSS

Question

私は四角形のグリッドを作成する関数を作成しました。 CSSの高さと幅を手動で30pxに設定すると、すべてが480x480ピクセルのコンテナ内の16x16グリッドで動作します。アイデアは、同じスペースに他の量の四角形を合わせることです。そのため、高さと幅を変数で設定する必要があります。

function makeGrid() { 
var $grid = $('#container'); 
var height = 480/numOfSides; 
var width = 480/numOfSides; 
    $('.gridSquare').css({'height':height+'px','width':width+'px'}); 
    for (i = 0; i < numOfSides; i++) { 
    var row = '<div>'; 
     for (j = 0; j < numOfSides; j++) 
     row += '<div class="gridSquare"></div>'; 
     row += '</div>'; 
     $grid.append(row); 
    } 
} 

ただし、私が使用しているコードでは1つの正方形が生成されています。私はこれらの変数とCSSのメソッドを使用して間違って何をしているすべてのアイデア？

Answer 1

ループの最後にgridSectionにCSSを設定する必要があります。そうしないと、最後の行に適用されません。

var numOfSides = 5; 

function makeGrid() { 
    var $grid = $('#container'); 
    var height = 480/(numOfSides); 
    var width = 480/(numOfSides); 

    for (i = 0; i < numOfSides; i++) { 
     var row = '<div>'; 

     for (j = 0; j < numOfSides; j++) { 
     row += '<div class="gridSquare"></div>'; 

     } 
     row += '</div>'; 
     $grid.append(row); 
    } 
    $('.gridSquare').css({'height':height+'px','width':width+'px'}); 
} 

makeGrid(); 

CodePen：http://codepen.io/nobrien/pen/bpLGXK