Как получить высоту элемента самых высоких детей в javascript/jQuery?

Мне нужна функция, чтобы получить высоту самого высокого элемента внутри div.

У меня есть элемент со многими другими внутри (динамически сгенерированный), и когда я запрашиваю высоту элемента контейнера, используя $(elem).height(), я получаю меньшую высоту, чем часть содержимого внутри него. Некоторые из элементов внутри являются изображениями, размер которых больше размера, указанного этим элементом.

Мне нужно знать самый высокий элемент, поэтому я могу получить его высоту.

Ответ 1

Вы всегда можете сделать:

var t=0; // the height of the highest element (after the function runs)
var t_elem;  // the highest element (after the function runs)
$("*",elem).each(function () {
    $this = $(this);
    if ( $this.outerHeight() > t ) {
        t_elem=this;
        t=$this.outerHeight();
    }
});

Отредактировано, чтобы заставить его работать снова.

Ответ 2

Я нашел этот фрагмент, который кажется более прямым и короче на http://css-tricks.com/snippets/jquery/equalize-heights-of-divs

var maxHeight = 0;

$(yourelemselector).each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(yourelemselector).height(maxHeight);

Ответ 3

Если элемент div меньше, чем у детей, дети, вероятно, плавают. Можете ли вы позволить div быть таким же большим, как дети?

Если вы можете, добавьте очищающий элемент внизу, чтобы div обернул его дочерними элементами:

<div id="someParent">
    <p>test</p>
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></div>
</div>

Или примените CSS-решение clearfix, чтобы сделать практически то же самое, но без дополнительной разметки или разделителя.

Затем содержащий div будет иметь ту же высоту, что и старший дочерний элемент, и вы можете получить его:

$("#someParent").height();

Ответ 4

В моем случае я должен был использовать его с отзывчивым дизайном, поэтому я заставил его работать с изменением размера окна.

function fixHeight(elem){
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(elem).height(maxHeight);
}

$(window).resize(function () {
    fixHeight('.myelement');
});
$(document).ready(function(e) {
    fixHeight('.myelement');
});

Я надеюсь, что это поможет кому-то!

Счастливые программисты!:)