jquery - 如何快速为大量元素设置相对高度

Question

我正在使用这段代码为许多 div 设置相对高度:

$("#output div").each(function (index) {
    $(this).css({ "height": ($(this).height() * multiplier) + "px" });
});

这是一个非常昂贵的操作。有什么方法可以优化速度吗？

设置绝对高度，像这样:

$("#output div").css({ "height": "20px" });

速度极快。遗憾的是，我不需要绝对值，而是相对于乘数的值。

--

编辑:

我不断添加这些高度未知的 div。像这样:

$("#output div:first").remove();
$("#output").append("<div class=\"output-column\" style=\"height: " + 40 * Math.random() + "px;\">&nbsp;</div>");

所以基本上它是一个图表，假设有 1000 个 div，从左侧弹出并在右侧插入(它们是 1 像素宽)。我需要的是让这些 div 动态改变它们相对于最高 div 的高度。所以最高的 div 占用了父级的高度，其他的相应地调整了它们的高度。因此，如果输入的 div 具有 120% 的高度，则必须将其调整为 100%，而其他的则相对向下调整 20%。

Answer 1

这里的问题很可能不是 javascript(虽然我不知道你在做什么我不能确定)。问题是每次在该循环中设置单个元素的高度时，浏览器都会重新计算布局。所以如果你有 1000 个元素，它会重新计算布局 1000 次，而你真正需要的是先设置所有高度，然后在所有设置完成后重新计算布局。

你是怎么做到的？带有文档片段:https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment .

绝对定位元素如此快的原因是因为绝对元素不影响页面上任何其他元素的定位。它们“漂浮”在它们上方，因此需要更少的布局重新计算。