Question

我希望将父级的高度与其子级的总高度相匹配，因此内容不会从父级边框流出。我正在使用以下代码：

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

它会遍历所有div的孩子吗？有时候，它有时会起作用。

此外，我尝试使用代码，假设它会考虑所有的孩子。但结果很奇怪，并且从正确的结果中得到了两倍的高度。

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

提前致谢。

Answer 1

尝试如下：

var totalHeight = 0;

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

http://api.jquery.com/outerHeight/将margins，paddings和borders带入计算中，该计算应返回更可靠的结果。

Answer 2

另一种方法是计算元素中顶部和最底部偏移之间的距离，将考虑任何非静态定位元素。

我只在一个页面和环境中对此进行了测试，所以我完全不确定使用它的安全性。如果代码非常糟糕或者是否值得一些改进，请发表评论。

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 3

如果您想忽略隐藏的元素，可以将其过滤掉：

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

Answer 4

这样怎么样。不要求你改变外部作用域中的变量，允许你重用sumHeights函数。

function sumHeights(height, element) {
    return height + $(element).outerHeight(true);
}

const outerHeight = $('#static-section')
    .children()
    .toArray()
    .reduce(sumHeights, 0);

Answer 5

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

使用jQuery计算div的子节点的高度

5 个答案: