使用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的孩子的身高

回答

相关问题