Соответствие высоты элементов jQuery / HTML - PullRequest
Новая
       4

Соответствие высоты элементов jQuery / HTML

2 голосов
/ 12 ноября 2010

В моем HTML-документе есть следующая конструкция: 

<div class="content">
<section class="column"></section>
<aside class="column"></aside>
</div>

И я хочу сопоставить высоты секции и высоту самого высокого из двух. У меня есть следующий скрипт, но он не работает, какие-либо идеи: 

  function unifyHeights()   
    {    
        var maxHeight = 0;    
        $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
  }

Ответы [ 3 ]

1 голос
/ 12 ноября 2010

Попробуйте использовать $('.column').css('height', maxHeight + 'px');

Кстати, вы можете заменить $('div.content').children('.column') на $('div.content > .column')

0 голосов
/ 12 ноября 2010

Похоже, что ничего не случилось с функцией в вашем вопросе, потому что оба столбца получают одинаковую высоту при использовании этой разметки и кода (взятых из вашего примера Pastebin): 

<!doctype HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
function unifyHeights()   
{    
    var maxHeight = 0;    
    $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
}
</script>
<style>
.content {
background-color: yellow;
}
section.column {
    width: 300px;
    float: left;
}
aside.column {
    width: 300px;
    floaT: left;
    display: inline;
}
</style>
</head>
<body>
<div class="content">
    <section style="background-color: pink;" class="column">jldkjfls<br/><br/></section>
    <aside style="background-color: green;" class="column">jldkjfls<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section>
<script>
    unifyHeights();
</script>
</body>
</html>
0 голосов
/ 12 ноября 2010

Хороший способ получить максимум набора свойств - использовать .map(): 

$(document).ready(function() {    
    var heights = $('div.content').children('.column').map(function(idx, el) {
        return $(this).outerHeight();
    }).get();

    $('.column').height(Math.max(heights));  
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...