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％的div，则必须将其调整为100％，其他则相对降低20％。

Answer 1

您是否考虑过：http://api.jquery.com/css/#css-propertyName-functionindex--value

在你的情况下，它将是：

$("#output div").css("height", function(index, value) {
  return value * multiplier + "px";
});

Answer 2

这里的问题很可能不是javascript（虽然我不知道你不知道自己在做什么）。问题是每次在该循环中设置单个元素的高度时，浏览器将重新计算布局。因此，如果您有1000个元素，它将重新计算布局1000次，当您真正需要的是先设置所有高度然后在设置完毕后重新计算布局。

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

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

如何快速设置大量元素的相对高度

2 个答案: