使用jQuery計算div的孩子的身高

我想將父母的身高與其子女的總高度相匹配，所以內容不會從父母的邊框流出。我正在使用以下代碼：使用jQuery計算div的孩子的身高

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

它會迭代所有div的子項嗎？有時候，它有時不起作用。

此外，我試着下面的代碼，假設它會考慮所有的孩子。但結果是奇怪的，並從正確的結果提供了兩倍的高度。

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

在此先感謝。

來源

2010-08-24 KutePHP

相當愚蠢的問題，但你在一開始申報totalHeight變量？像「var totalHeight = 0;」你發佈的第二個例子應該可以工作，但是和jAndy建議的一樣，你應該使用outerHeight（）而不是height（）來獲得更高的可靠性。 – Kranu 2010-08-24 05:35:07

@ Kranu，感謝您的評論 - 「非常愚蠢的問題」:) 爲什麼你認爲我沒有在一開始就宣佈它。我曾提到它有時有效，有時並不。我不確定每個方法是如何工作的。但是，現在我已經知道了。無論如何，你應該期待新的愚蠢的問題。再次感謝。 – KutePHP 2010-08-24 06:05:09

嗨KutePHP，Kranu可能是在談論他自己的問題，而不是你的:)它發生在我們所有人忘記初始化一個變量，這就是爲什麼我們需要棉絨和hinters :) – cipak 2014-09-25 22:49:40

嘗試它像這樣：

var totalHeight = 0; 

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

http://api.jquery.com/outerHeight/需要margins，paddings和borders到它應該會返回一個更可靠的結果計算。

來源

2010-08-24 05:29:55 jAndy

+11

outerHeight不考慮邊際，除非你通過在布爾參數「true」中，並且使用+ =會更加整潔。因此，第二行應爲： totalHeight + = $（this）.outerHeight（true）; – TheBoss 2012-10-05 17:58:55

確保在這個地方上面使用'var totalHeight'，這樣你的變量就不會被附加到窗口。 – Brad 2012-11-11 02:27:43

我還需要防止在某些子元素上使用'overflow：auto'邊緣摺疊，然後所有計算都會返回正確的值，並將餘量考慮在內 – danjah 2017-07-18 22:58:47

-1

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

來源

2010-08-24 06:09:27 james

該變量需要在$ .each循環之外聲明，否則將被覆蓋爲每個孩子和外部範圍無法訪問。此外，JS區分大小寫：'TotalHeight！= Totalheight'，'$（el）.Height（）！= $（el）.height（）' – Josiah 2016-12-21 14:21:46

另一種方法是計算所述頂之間的距離和元件，其中將佔任何非靜態定位的元素內最底部偏移。

我只在一個頁面和環境中測試過，所以我一點都不確定它的安全性。如果是非常糟糕的代碼，或者它應該得到一些改進，請發表評論。

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;

來源

2011-11-22 22:48:48

如果你想忽略隱藏的元素，可以過濾出來：

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

來源

2013-09-19 12:01:38

您可以將其縮短爲：'.children（'：visible'）' – 2016-09-29 18:18:29

使用jQuery計算div的孩子的身高

回答

相關問題