Вопрос по javascript, jquery, dom – Как получить высоту самого высокого дочернего элемента в javascript / jQuery?

19

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

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

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

Ваш Ответ

4   ответа
27

который кажется более прямым и коротким наhttp: //css-tricks.com/snippets/jquery/equalize-heights-of-div

var maxHeight = 0;

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

$(yourelemselector).height(maxHeight);
это должен быть принятый ответ Notflip
4

чем его дети, вероятно, дети плавают. Можете ли вы позволить 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>

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

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

$("#someParent").height();
что если будет 3 элемента с шириной: например, 50%, то высота родителя будет первой, а сумма высоты третьего элемента. Так что ваш ответ неверен Szymon Dziewoński
Как бы$("#someParent").height() дать сумму роста двух из трех детей? В этом примере всегда будет указана высота дочернего элемента с наибольшей высотой из-за очищающего элемента. Какое отношение имеет к этому ширина детей? Попробуйте это в браузере. Этот ответ был дан 6 лет назад, с тех пор многое произошло. Flexbox - гораздо более простой способ, если вы можете отказаться от поддержки <IE9. oldwizard
Чувак, подумай еще раз: 3 элемента 50%, тогда высота parent - это сумма первого и третьего элементов (если float left), ну, это довольно просто .. Szymon Dziewoński
3

поэтому я заставил его работать с изменением размера окна.

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');
});

Надеюсь, это кому-нибудь поможет!

Счастливые парни! :)

30

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

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();
    }
});

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

Возможно, вы захотите использовать externalHeight () вместо height (). John Fisher
Отлично, спасибо, ребята! Leandro Ardissone
elem не определен t_elem.outerHeight () не является функцией Вы проверяли это? David Ryder
@ Дэвид Райдер:elem не определено, потому что это элемент, который вы тестируете. Вместо elem вы вводите имя фактической переменной, содержащей элемент, который вы хотите протестировать. Что касаетсяouterHeight() Скорее всего, что-то изменилось, так как я ответил на это. Я отредактирую ответ, чтобы он заработал. Thomas
@ Thomas спасибо, парень, тоже искал это. Старый, но золотой ответ. Как предложение, вы можете добавить комментарий послеt=$this.outerHeight(); чтобы новички могли понять, чтоt является окончательным значением, и он может использовать любое значение со значением (например,something.height(t+'px') илиsomething.animate( etc ); RaphaelDDL

Похожие вопросы