计算div'的高度；使用jQuery访问子对象

我想将父对象的高度与其子对象的总高度相匹配，这样内容就不会从父对象的边界流出。我正在使用以下代码：

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

它会遍历div的所有子级吗？有时有效，有时无效

此外，我尝试遵循代码，假设它将考虑所有的孩子。但结果很奇怪，与正确结果相差两倍

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

提前谢谢。

这样试试：

var totalHeight = 0;

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

---

将

边距

、

填充

和

边框

纳入计算，这将返回更可靠的结果。

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

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

我只在一个页面和环境中测试过它，所以我根本不确定使用它有多安全。请发表评论，如果是非常糟糕的代码或如果它值得一些改进

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;

var topOffset=bottomOffset=0，
外部=真实；
$el.children（）.each（函数（i，e）{
变量$e=$（e），
eTopOffset=$e.offset（）.top，
ebottomofset=eTopOffset+（外部？$e.outerHeight（）：$e.height（））；
if（eTopOffset底部偏移）{
底部偏移=EBOTOMOFSET；
}
});
var childrenHeight=bottomOffset-topOffset-$el.offset（）.top；

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

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

---

像这样怎么样。不要求您在外部范围内变异变量，允许您重用sumHeights函数

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

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

---

很愚蠢的问题，但是你在开始时声明了totalHeight变量吗？例如“var totalHeight=0”；您发布的第二个示例应该可以运行，但正如jAndy建议的，您应该使用outerHeight（）而不是height（），以获得更高的可靠性。@Kranu，感谢您的评论—“非常愚蠢的问题”：）为什么您认为我在开始时没有声明它。我提到过它有时有效，有时无效。我不确定是怎么回事。每一个都起作用。但是，现在我明白了。不管怎样，你应该期待新的人提出如此愚蠢的问题。再次感谢。嘿Kuteppp，Kranu可能在谈论他自己的问题，而不是你的：）我们都会忘记初始化变量，这就是为什么我们需要linter和hinters：）outerHeight不考虑边距，除非你传入布尔参数“true”，使用+=。因此，第二行应该是：totalHeight+=$（this）.outerHeight（true）；请确保在该位置上方使用

var totalHeight

，这样您的变量就不会附着到窗口。我还需要防止在某些子元素上出现

溢出：auto

时边距崩溃，然后所有计算返回正确的值，考虑到边距，您可以将其缩短为：

.children（“：visible”）

变量需要在$.each循环之外声明，否则每个子循环都会覆盖该变量，并且外部作用域无法访问该变量。JS也区分大小写：

TotalHeight！=总高度

，

$（el）.Height（）！=$（el）.高度（）