jQuery 使用jQuery计算div的孩子的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3553776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculate height of div's children using jQuery
提问by KutePHP
I want to match parent's height with the total height of its' children, so the content does not flow out from parent's border. I'm using the following code :
我想将父级的高度与其子级的总高度相匹配，因此内容不会从父级的边框流出。我正在使用以下代码：
$("#leftcolumn").each(function(){
totalHeight=totalHeight+$(this).height();
});
Will it iterate through all the div's children? Sometimes, it works sometimes it doesn't.
它会遍历所有 div 的孩子吗？有时，它起作用有时不起作用。
Also, I tried following code, assuming it will consider all its children. But the result is strange and gives doubled height from the correct result.
另外，我尝试了以下代码，假设它将考虑其所有子项。但结果很奇怪，并且给出了正确结果的两倍高度。
$("#leftcolumn > *").each(function(){
totalHeight=totalHeight+$(this).height();
});
Thanks in advance.
提前致谢。
回答by jAndy
Try it like so:
像这样尝试：
var totalHeight = 0;
$("#leftcolumn").children().each(function(){
totalHeight = totalHeight + $(this).outerHeight(true);
});
http://api.jquery.com/outerHeight/takes margins, paddingsand bordersinto the calculation which should return a more reliable result.
http://api.jquery.com/outerHeight/需要margins，paddings并borders进入计算应该返回更可靠的结果。
回答by Alexander Wallin
Another approach is calculating the distance between the top- and bottommost offsets within the element, which would account for any non-static positioned elements.
另一种方法是计算元素内顶部和底部偏移量之间的距离，这将考虑任何非静态定位元素。
I've only tested this in one page and environment, so I'm not at all sure how safe it is to use. Please post a comment if be very bad codes or if it deserves some improvement.
我只在一页和环境中测试过这个，所以我完全不确定使用它有多安全。如果代码非常糟糕或者值得改进，请发表评论。
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;
回答by Radek Pech
If you want to ignore hidden elements, you can filter them out:
如果你想忽略隐藏元素，你可以过滤掉它们：
$("#leftcolumn").children().filter(':visible').each(function(){
totalHeight += $(this).outerHeight();
});
回答by nidal
How about like this. Does not require you to mutate a variable in an outer scope, allows you to reuse the sumHeights function.
像这样怎么样。不需要您在外部范围内改变变量，允许您重用 sumHeights 函数。
function sumHeights(height, element) {
return height + $(element).outerHeight(true);
}
const outerHeight = $('#leftcolumn')
.children()
.toArray()
.reduce(sumHeights, 0);
回答by james
$('#leftColumn').children().each(function(){
var Totalheight += $(this).Height();
})var parentHeight = $('#leftColumn').Height();
if(parentHeight===TotalHeight)
{//Do the nasty part}
else
{//Do the Good part}
