Установка одинаковой высоты для блоков в jQuery

Часто на сайтах возникает необходимость установить одинаковую высоту для блоков div.elem. Например, это может быть полезно, если вы хотите выровнять блоки по вертикали или если вы хотите, чтобы блоки с разным содержимым имели одинаковый размер. В этом случае функция, которая находит div.elem с наибольшей высотой в jQuery и присваивает эту высоту остальным блокам div.elem будет очень полезна.

Как это работает

Функция setEqualHeight() сначала находит блок div.elem с самой большой высотой, сохраняет эту высоту в переменной maxHeight, а затем устанавливает эту высоту для всех остальных блоков div.elem.

// функция для установки одинаковой высоты для блоков div.elem
function setEqualHeight() {
    var maxHeight = 0;
    $('.elem').each(function() {
        if ($(this).height() > maxHeight) { // находим блок с максимальной высотой
            maxHeight = $(this).height();
        }
    });
    $('.elem').height(maxHeight); // устанавливаем высоту для всех блоков div.elem
}

Эта функция вызывается как при загрузке страницы ($(document).ready()) так и при изменении размеров окна браузера ($(window).resize()), чтобы обеспечить, что все блоки div.elem имеют одинаковую высоту в любых условиях.

$(document).ready(function() {
    setEqualHeight(); // вызываем функцию при загрузке страницы
});

$(window).resize(function() {
    setEqualHeight(); // вызываем функцию при изменении размеров окна браузера
});

Как использовать

Для использования этой функции вам нужно добавить блоку div.elem класс elem, чтобы функция могла найти их все.

<div class="elem">
   <!-- ваш контент -->
</div>
<div class="elem">
   <!-- ваш контент -->
</div>
<div class="elem">
   <!-- ваш контент -->
</div>

Вы можете использовать эту функцию в любом месте вашего скрипта jQuery, но чаще всего ее добавляют в файл script.js и подключают его после библиотеки jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>

Заключение

Мы надеемся, что эта функция поможет вам установить одинаковую высоту для всех блоков div.elem на вашей странице. Она может быть очень полезна для улучшения внешнего вида вашего сайта и повышения его удобства использования.