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

我知道squareSideLength正确计算，但.square类的宽度和高度未正确设置。添加.squares后，宽度和高度显示为0。

Answer 1

这些行：

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

不要前瞻地应用于运行后创建的元素。

你可以使用相同的策略，除了在之后设置宽度和高度你添加所有.square元素（或者当你将它插入循环时直接在每个元素上）。

如果您可以使用不需要在JavaScript中计算的非动态维度，那么在静态CSS中设置.square的样式显然会更容易。

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

jQuery动态宽度/高度未应用

2 个答案: