0

我正在使用此代码为许多 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% 相对向下。

4

2 回答 2

1

你有没有考虑过： http: //api.jquery.com/css/#css-propertyName-functionindex--value

在您的情况下，它将是：

$("#output div").css("height", function(index, value) {
  return value * multiplier + "px";
});
于 2013-11-04T12:54:26.770 回答
1

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

你怎么做到这一点？带有文档片段：https ://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment 。

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

于 2013-11-04T13:35:17.440 回答