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

Question

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

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

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

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

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

（1）将 someInsertionPoint 的可见性设置为“隐藏”。

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

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

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

(5) 当单击“更多...”链接时，截断的文本可以替换为完整文本，并且我可以使用我在 #2 中缓存的高度将高度动画化为其理想大小。

有更好的办法吗？

谢谢。

Answer 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。

希望有帮助