JavaScript-Einstellung CSS mit Variablen

Question

Ich habe eine Funktion, die ein Raster aus Quadraten erstellt. Wenn ich die Höhe und Breite im CSS manuell auf 30px einstelle, funktioniert alles mit einem 16x16 Raster in einem 480px x 480px Container. Die Idee ist, andere Quadratsummen in den gleichen Raum zu passen, also muss ich die Höhe und die Breite durch Variable festlegen.

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); 
    } 
} 

Allerdings erzeugt der Code, den ich verwende, jetzt ein Quadrat. Irgendwelche Ideen was ich falsch mache bei der Verwendung dieser Variablen und der CSS-Methode?

Answer 1

Sie müssen die css auf gridSection am Ende der Schleife festlegen, sonst wird es nicht auf die letzte Zeile angewendet.

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