A_SweetCherry
@A_SweetCherry

Как установить одинаковую высоту элементам списка используя высоту самого большого?

Есть несколько списков, например вот таких:
<ul class="box-fixing-height">
     <li class="fixing-height">содержимое</li>
     <li class="fixing-height">содержимое</li>
     <li class="fixing-height">содержимое</li>
</ul>

Количество элементов в списке не ограничено.
Нужно чтобы в каждом списке все элементы были одинаковой высоты, равной высоте максимально высокого элемента, в нашем случае "fixing-height". Высота максимально высокого элемента зависит от содержимого. Соответственно в каждом списке будут свои максимально высокие элементы.
Сейчас у меня несколько таких списков, помеченных разными классами, и для каждого написан свой скрипт, примерно такой:
var maxHeight = 0;
  $('.box-fixing-heigh').find('.fixing-height').each(function(e, i){
    var height = $(i).height();
    if(height>maxHeight )maxHeight =height;
  });
  $('.box-fixing-height').find('.fixing-height').height(maxHeight );

Если всем спискам поставить эти же классы, то высота элементов во всех списках будет равна максимальному из всех списков, а нужно что бы у каждого списка была своя высота.
По этому пока для каждого списка указаны свои классы и написан код для каждого, но это очень не гибкое решение.
Каким еще способом можно решить такую задачу, что бы было более универсально?
  • Вопрос задан
  • 4202 просмотра
Решения вопроса 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
$(function() {
    $('ul').each(function() {
        var maxHeight = 0;
        $(this).children('li').each(function() {
            if ($(this).height() > maxHeight)
                maxHeight = $(this).height();
        });
        $(this).children('li').height(maxHeight);
    });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы