элемент с максимальной высотой из набора элементов

85

У меня есть набор divэлементов. В jQuery, я хотел бы иметь возможность узнать divмаксимальную высоту, а также высоту этого div. Например:

<div>
    <div class="panel">
      Line 1
      Line 2
    </div>
    <div class="panel">
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1
      Line 2
    </div>
</div>

Глядя на вышеизложенное, мы знаем, что 2-я div(с 4 линиями) имеет максимальную высоту из всех. Как мне это узнать? Может кто-нибудь помочь?

Пока я пробовал:

$("div.panel").height()который возвращает высоту 1-го div.

jquery лшеттил
источник

Ответы:

213

Используйте .map()и Math.max.

var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());

Если это сбивает с толку, это может быть яснее:

var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get();

maxHeight = Math.max.apply(null, heights);
Мэтт Болл
источник
1
Это находит самую высокую высоту, но не ссылку на фактический элемент.
Винсент Рамдхани
Ты прав; Я не был уверен, что OP тоже хочет этот элемент. Ваш ответ работает в этом случае.
Мэтт Болл,
3
@MattBall Могу я спросить, почему функция get? Что он делает и какова его цель?
chodorowicz
2
@chodorowicz рад, что вы спросили. См. Этот ответ под вторым заголовком.
Мэтт Болл
1
@MattBall Спасибо. Итак, jQuery .map возвращает объект, подобный массиву, а get .get превращает его в массив. Но кажется, что Math.max легко работает с обоими этими типами (только что протестирован в консоли Chrome), поэтому в этом случае .get кажется ненужным. Или я не прав?
chodorowicz
20

В опубликованном вами html следует использовать некоторые, <br>чтобы на самом деле иметь div с разной высотой. Как это:

<div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
    <div class="panel">
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
</div>

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

var highest = null;
var hi = 0;
$(".panel").each(function(){
  var h = $(this).height();
  if(h > hi){
     hi = h;
     highest = $(this);  
  }    
});
//highest now contains the div with the highest so lets highlight it
highest.css("background-color", "red");
Винсент Рамдхани
источник
Будьте осторожны с этим, если вы не используете метод jQuery внутри (как .heightв этом случае), тогда вы должны разыменовать его, например: `$ (this) [0] .scrollHeight;`
rogerdpack
5

Если вы хотите использовать повторно в нескольких местах:

var maxHeight = function(elems){
    return Math.max.apply(null, elems.map(function ()
    {
        return $(this).height();
    }).get());
}

Тогда вы можете использовать:

maxHeight($("some selector"));
Диого Гомеш
источник
1 

function startListHeight($tag) {
  
    function setHeight(s) {
        var max = 0;
        s.each(function() {
            var h = $(this).height();
            max = Math.max(max, h);
        }).height('').height(max);
    }
  
    $(window).on('ready load resize', setHeight($tag));
}

jQuery(function($) {
    $('#list-lines').each(function() {
        startListHeight($('li', this));
    });
});
#list-lines {
    margin: 0;
    padding: 0;
}

#list-lines li {
    float: left;
    display: table;
    width: 33.3334%;
    list-style-type: none;
}

#list-lines li img {
    width: 100%;
    height: auto;
}

#list-lines::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ul id="list-lines">
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
        <br /> Line 3
        <br /> Line 4
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
</ul>
Развернуть фрагмент

маэстро888
источник
1 

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

ul li {
  width: calc(100% / 3);
}

img {
  width: 100%;
  height: auto;
}
<ul>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
    <br> Line 3
    <br> Line 4
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
</ul>
Развернуть фрагмент

маэстро888
источник
0

Если вас интересовала сортировка полностью в стандартном JavaScript или без использования forEach ():

var panels = document.querySelectorAll("div.panel");

// You'll need to slice the node_list before using .map()
var heights = Array.prototype.slice.call(panels).map(function (panel) {
    // return an array to hold the item and its value
    return [panel, panel.offsetHeight];
}),

// Returns a sorted array
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});
Пол Кейн
источник
0

Я бы сказал, что самый простой и понятный способ:

var maxHeight = 0, maxHeightElement = null;
$('.panel').each(function(){
   if ($(this).height() > maxHeight) {
       maxHeight = $(this).height();
       maxHeightElement = $(this);
   }
});
Davefrassoni
источник
0

Это может быть чем-то полезным. Исправление кода из @diogo

$(window).on('load',function(){

// get the maxHeight using innerHeight() function
  var maxHeight = Math.max.apply(null, $("div.panel").map(function ()                                                        {
    return $(this).innerHeight();
  }).get());
  
// Set the height to all .panel elements
  $("div.panel").height( maxHeight );
  
});
Джессимар Педроса
источник