離頁元素的測量高度

我是元素中的Ajaxing。我想根據它們的高度決定將它們放在哪裏（想想箱子裝箱類型算法）。離頁元素的測量高度

當我通過我的元素，這樣的循環，我總是爲outerHeight0：

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

我怎樣才能讓我的元素的顯示高度？

看來我必須添加元素到頁面來獲得高度，這是有道理的。
這樣做的最好方式是儘可能簡單地讓用戶看不見？

來源

2012-10-16 George Duckett

追加職位的hidden（顯示：無）div元素，然後遍歷它們獲得他們各自的outerHeight值。

HTML

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

CSS

#postContainer { display: none;}

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(); 
    }) 
}

來源

2012-10-16 08:26:08 kayen

我只是嘗試添加到現有的元素，但不能直接詢問高度後，我想一個計時器/回調是必要的。 –

已更新我的代碼以添加一個'outerHeight'函數，只有在所有'posts'附加到容器後才能執行該函數。 – kayen

您必須添加元素到頁面，以便他們經歷佈局過程，然後他們將有一個大小。

您可以將它們添加到身體，獲取身高，然後刪除它們。由於瀏覽器是忙於運行你的代碼，而元素是在頁面的元素將永遠不會顯示出來：

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

來源

2012-10-16 08:20:56 Guffa

我如何能做到這一點，同時用戶看不到的？我可以將它們添加到-1000的左邊，然後查詢高度，然後將它們移動到我想要的位置，例如？（沒有任何計時器等） –

+1因此，考慮到OP的要求，他怎麼可能計算*高度會是多少*不添加元素到頁面？ –

@GeorgeDuckett試試看！ –

離頁元素的測量高度

回答

相關問題