从最高div获取高度并将其应用于其他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元素(

  • 应用outerHeight所有

但我找不到一个好的/漂亮的方法(有一个解决方案,但我需要很多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中,这就是问题所在吗?

与其添加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));
});

游戏有点晚,但您可以使用数组:

var arr = $.makeArray()
$('div').each(function(){
    arr.push($(this).outerHeight());
});
$('div').css('height', Math.max.apply( Math, arr ));
console.log('highest height is '+Math.max.apply( Math, arr ));

看看我的例子-http://jsfiddle.net/ZhG2S/

试试这个:

$(document).ready(function(){
    var headerHeight = getTallestHeaderHeight()
    $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight(headerHeight);
    console.log(headerHeight);
});
function getTallestHeaderHeight() {
    var maxHeight = 0;
    $("HEADER").each(function() {
        if ($(this).outerHeight() > maxHeight)
            maxHeight = $(this).outerHeight()
    })
    return maxHeight;
}

最新更新