JQuery：预先计算插入项的高度答案

【问题标题】：JQuery: Pre-Calculate Height of Inserted ItemJQuery：预先计算插入项的高度
【发布时间】：2012-02-21 10:01:46
【问题描述】：

已通过 AJAX 调用检索到一些文本，需要将其插入 DOM：

$("#someInsertionPoint").append(someHtml);

someHtml 可能很小，以便为 #someInsertionPoint 创建 50 像素的结果高度。话又说回来，可能有太多文本，以至于#someInsertionPoint 最终以 300 像素或更高的高度来包含所有文本。

在 someHtml 很长的情况下，规范要求显示文本的截断版本（带有尾随省略号），然后是“更多...”链接，单击该链接时会增加 #someInsertionPoint 的高度，以动画方式，以适应全文。

一切似乎都很简单，除了一个例外：我如何确定插入全文时#someInsertionPoint 的高度？回想一下，该值将用作用户单击“更多...”链接时发生的动画高度变化的终点。 StackOverflow.com 上的一些帖子表明无法预先计算高度；它只能在文本插入完成后检索。这使我相信我的方法应该如下：

(1) 将 someInsertionPoint 的可见性设置为“隐藏”。

(2) 插入全文并将someInsertionPoint的高度缓存在一个变量中。

(3) 截断插入的文本并添加省略号。将#someInsertionPoint 的高度设置为50px。

(4) 使 someInsertionPoint 可见以在 50px 的高度显示截断的文本。

(5) 单击“更多...”链接时，可以将截断的文本替换为全文，我可以使用我在 #2 中缓存的高度将高度设置为理想大小。

有没有更好的办法？

谢谢。

【问题讨论】：

标签： javascript jquery height

【解决方案1】：

我认为你制造了一个问题，因为它通常没有问题。这是一个设计缺陷。只是不要使用固定高度。如果您想自动调整某些东西的大小，请使用最小高度并让内容来调整大小。这是最简单的方法。否则，当您想使用固定高度时，您可以使用两个 div（一个具有固定高度）并在插入后测量“ajax”高度（计算高度必须可见）。

例如：

<div id="fixed" style="height:200px;overflow:hidden">
 <div id="loader">
</div>

$('#loader').html('your content');
alert($('#loader').outerHeight());

当您尝试此示例时，#fixed div 在加载网络内容时不会调整大小。插入后，您可以测量高度并根据需要调整父 div #fixed。

希望对你有帮助

【讨论】：