JQuery динамическая ширина/высота не применяются

Question

У меня есть сегмент JQuery, где я пытаюсь динамически установить ширину и высоту некоторых элементов Div на основе ширины и высоты DIV они в:

numBlocks = 256; 
$(document).ready(function() { 
    i = 0; 
    maxArea = $("#container").width() * $("#container").height(); 
    squareSideLength = Math.sqrt(maxArea/numBlocks); 
    $(".square").css("width", squareSideLength); 
    $(".square").css("height", squareSideLength); 

    while(i < numBlocks) 
    { 
     $("#container").append("<div class='square'></div>"); 
     i++; 
    } 
}); 

Я знаю, что квадрат длины линии вычисляется правильно, но ширина и высота класса .square не установлены правильно. После добавления .squares, ширина и высота отображаются как 0.

Answer 1

Этих строк:

$(".square").css("width", squareSideLength); 
$(".square").css("height", squareSideLength); 

не применяется перспективно, к элементам, созданных после того как они задавят.

Вы можете использовать ту же самую стратегию, кроме установки ширины и высоты после, вы добавляете все элементы .square (или непосредственно на каждый элемент при вставке его в цикл).

Если вы можете иметь нединамические размеры, которые не нужно рассчитывать в JavaScript, было бы проще просто установить стили для .square в статическом CSS.

Answer 2

Вы должны установить свойство после создания элементов не ранее

Тест здесь: https://jsfiddle.net/aa4moxks/

numBlocks = 256; 
$(document).ready(function() { 
    i = 0; 
    maxArea = $("#container").width() * $("#container").height(); 
    squareSideLength = Math.sqrt(maxArea/numBlocks); 

    while(i < numBlocks) 
    { 
     $("#container").append("<div class='square'></div>"); 
     i++; 
    } 

    $(".square").css("width", squareSideLength); 
    $(".square").css("height", squareSideLength); 
});