21.12.2018

Определить максимальную высоту из блоков jquery

Чтобы определить максимальную высоту блоков и выровнять все блоки с определенным классом под эту высоту, можно написать функцию на основе map():

$.fn.setMaxHeights = function() {
  var maxHeight = this.map(function(i,e) {
    return $(e).height();
  }).get();

  return this.height( Math.max.apply(this, maxHeight) );
};

Используя написанную функцию можно выравнивать блоки по максимальной высоте элемента из этих блоков.
К примеру:

<div class="column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
<div class="column">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Как видим блоки содержат разный контент и соответственно разную высоту. Используем нашу функцию.

$('.column').setMaxHeights();

Получаем:

Пример на jsfiddle

Поделиться: