Часто на сайтах возникает необходимость установить одинаковую высоту для блоков 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
на вашей странице. Она может быть очень полезна для улучшения внешнего вида вашего сайта и повышения его удобства использования.