Tính chiều cao của trẻ em div bằng cách sử dụng jQuery

Question

Tôi muốn đối sánh chiều cao của cha mẹ với tổng chiều cao của 'trẻ em', vì vậy nội dung không chảy ra khỏi đường viền của cha mẹ. Tôi đang sử dụng mã sau:

$("#leftcolumn").each(function(){ 
    totalHeight=totalHeight+$(this).height(); 
    }); 

Nó sẽ lặp qua tất cả các con của div? Đôi khi, nó hoạt động đôi khi nó không.

Ngoài ra, tôi đã thử mã sau đây, giả sử nó sẽ xem xét tất cả các con của nó. Nhưng kết quả là lạ và cho chiều cao gấp đôi từ kết quả chính xác.

$("#leftcolumn > *").each(function(){ 
    totalHeight=totalHeight+$(this).height(); 
}); 

Xin cảm ơn trước.

Answer 1

Hãy thử nó như vậy:

var totalHeight = 0; 

$("#leftcolumn").children().each(function(){ 
    totalHeight = totalHeight + $(this).outerHeight(true); 
}); 

http://api.jquery.com/outerHeight/ mất margins, paddings và borders vào tính toán mà phải trả lại một kết quả đáng tin cậy hơn.

Answer 2

$('#leftColumn').children().each(function(){ 
    var Totalheight += $(this).Height(); 
})var parentHeight = $('#leftColumn').Height(); 
if(parentHeight===TotalHeight) 
{//Do the nasty part} 
else 
{//Do the Good part} 

Answer 3

cách tiếp cận khác là tính toán khoảng cách giữa các từ trên và ở dưới cùng offsets bên trong phần tử, đó sẽ chiếm vị trí bất kỳ yếu tố không tĩnh.

Tôi chỉ thử nghiệm điều này trong một trang và môi trường, vì vậy tôi không chắc chắn về cách sử dụng an toàn. Xin vui lòng gửi bình luận nếu là mã rất xấu hoặc nếu nó xứng đáng được cải thiện.

var topOffset = bottomOffset = 0, 
    outer = true; 
$el.children().each(function(i, e){ 
    var $e = $(e), 
     eTopOffset = $e.offset().top, 
     eBottomOffset = eTopOffset + (outer ? $e.outerHeight() : $e.height()); 

    if (eTopOffset < topOffset) { 
     topOffset = eTopOffset; 
    } 
    if (eBottomOffset > bottomOffset) { 
     bottomOffset = eBottomOffset; 
    } 
}); 

var childrenHeight = bottomOffset - topOffset - $el.offset().top; 

Answer 4

Nếu bạn muốn bỏ qua yếu tố ẩn, bạn có thể lọc chúng ra:

$("#leftcolumn").children().filter(':visible').each(function(){ 
    totalHeight += $(this).outerHeight(); 
});