javascript - 从最高的 div 获取高度并将其应用于其他 div

Question

基本上

我有几个具有灵活高度和固定填充的 div，因此很难让它们都具有相同的高度，

我正在尝试这样:

$(document).ready(function(){
    $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight( $('header:eq(0)').outerHeight() );


    console.log($('header:eq(0)').outerHeight(true));
});

但问题是标题并不总是最高的，所以我需要

• 检查哪个更高(考虑到有多个 .content 元素)

• 应用外部高度 对他们所有人

但我找不到好的/漂亮的方法(有一个解决方案，但我需要很多 if 和变量)来做到这一点

有什么线索吗？

-编辑-

在等待的时候我想到了这个

$(document).ready(function(){

    var height = 0;
    $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){
         if($(this).outerHeight() > height){
            height = $(this).outerHeight();
         }
    });
    $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){

             $(this).outerHeight(height);

    });

    console.log('highest height is '+height); //it doesn't output the highest value
});

但大多数 div 都在 display:none 中，这是问题所在吗？

Answer 1

不是添加 display none，而是给它们“hide”类并使用它。

$(function(){
    var height = 0;
    $('.hide').show();
    $('header').each(function(){
        height = Math.max( height, $(this).outerHeight() )
    });
    $('.hide').hide();
    $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight(height);
    console.log($('header:eq(0)').outerHeight(true));
});