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

JQuery: Pre-Calculate Height of Inserted Item

本文关键字：插入项目 高度 计算 JQuery      更新时间：2023-09-26

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

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

someHtml可能很小，以便为#someInsertionPoint创建50px的结果高度。再说一遍，可能有太多的文本，以至于#someInsertionPoint最终的高度为300px或更高，以便包含所有文本。

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

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

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

（2） 在变量中插入全文并缓存someInsertionPoint的高度。

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

（4） 使someInsertionPoint可见，以显示高度为50px的截断文本。

（5） 当点击"更多…"链接时，截断的文本可以替换为全文，我可以使用我在#2中缓存的高度将高度设置为理想大小。

有更好的方法吗？

谢谢。

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

例如：

<div id="fixed" style="height:200px;overflow:hidden">
 <div id="loader">
</div>
$('#loader').html('your content');
alert($('#loader').outerHeight());

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

希望它能帮助

相关文章：