javascript - 我将如何编写 jQuery 脚本来汇总当前显示的 div 的高度？

Question

我的 div 经常在显示和不显示之间切换。这些div也在不断改变高度。它们被放置在一个名为 Panel 的 div 中。始终显示面板并以 600 的设置高度开始。

我正在尝试编写一个 jQuery 脚本，该脚本会将 Panel 中当前显示的 div 的高度相加，并检查显示的 div 的高度相加是否大于 600px。

如果总数大于 600，则面板高度将设置为自动。

我无法弄清楚这样做的逻辑。

现在我有:

function CalculateHeightTotal(){
        if(
            $('#Div1').height() +
            $('#Div2').height() +
            $('#Div3').height() +
            $('#Div4').height() +
            $('#Div5').height() +
            $('#Div6').height() +
            $('#Div7').height()   
            > 600 ) { 
                      $('#Panel').css('height','auto'); 
                    }  
}

但这样做的问题是，因为当时可能不会显示某些 Div，所以不应该考虑这些 Div 的高度。

因此，该代码不是解决方案。如果有人可以提供见解，请做...

(抱歉奇怪的格式。我是 jQuery 的新手。)

Answer 1

假设包装 div 有 id parentDiv 并且每个内部 div 都有一个类 innerDiv，用 is(':visible') 选择每个可见的内部 div 选择器并计算它的高度。

然后，将每个高度添加到一个变量中，比方说 h

var h = 0; 
$('#parentDiv').find('.innerDiv').is(':visible').each(function() {
   h += parseFloat($(this).outerHeight());
});

更新

function CalculateHeightTotal(){
    var h = 0; 
    $('#parentDiv').find('.innerDiv').is(':visible').each(function() {
       h += parseFloat($(this).outerHeight());
    });
    if(h > 600 ) { 
       $('#Panel').css('height','auto'); 
    }  
}