오프 페이지 요소의 높이 측정

Question

요소에서 Ajaxing입니다. 나는 그들의 높이 (box-packing type algorithm을 생각해 보라)에 근거하여 어디로 둘 것인지 결정하고 싶다.

내가 같은 내 요소를 통해 루프, 난 항상 outerHeight에 대한 0을 얻을 :

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

가 어떻게 내 요소의 표시 높이를 얻을 수 ?

---

높이를 얻으려면 페이지에 요소를 추가해야합니다.
가능한 한 사용자에게 보이지 않는 동안이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

가 hidden에 게시물을 추가 각각의 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(); 
    }) 
} 

Answer 2

레이아웃 프로세스를 통과 할 수 있도록 요소를 페이지에 추가해야합니다. 그런 다음 크기가 지정됩니다.

몸에 추가하고 높이를 얻은 다음 제거 할 수 있습니다. 브라우저가 요소가 페이지에있는 동안 당신의 코드를 실행 중입니다으로, 요소는 표시하지 않습니다 : (: 없음 디스플레이) 사업부 요소를 다음 얻기 위해이를 반복

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