Question

我正在使用Ajaxing元素。我想根据它们的高度决定把它们放在哪里（想想盒子包装类型算法）。

当我循环浏览我的元素时，0总是得到outerHeight：

posts.each(function(i, e) {
    var elementHeight = $(e).outerHeight();
    // elementHeight is always 0
});

如何获得元素的显示高度？

看来我必须将元素添加到页面才能获得高度，这很有意义在尽可能简单地让用户看不见的情况下，最好的方法是什么？

Answer 1

您必须将元素添加到页面中，以便它们完成布局过程，然后它们将具有大小。

您可以将它们添加到正文，获取高度，然后将其删除。由于浏览器忙于在元素位于页面中时运行代码，因此元素将永远不会显示：

var el = $('<div>test</div>');
$(document.body).append(el);
var h = el.height();
el.remove();

Answer 2

将帖子附加到hidden（display：none）div元素，然后迭代它们以获取各自的outerHeight值。

<强> HTML

<div id="postContainer"></div>

<强> CSS

#postContainer { display: none;}

<强> JS

var cont = $('#postContainer'), postsLength = posts.length;
posts.each(function(i, e) {
    cont.append(e);
    if (!--postsLength) calcOuterHeight();
});

function calcOuterHeight(){
    cont.find('.posts').each(function(i, e){
        var oh = $(e).outerHeight();
    })
}

测量离页元素的高度

2 个答案: