Поместить .height в массив?

Question

У меня есть карусель jQuery с этим HTML:

<ul>
    <li>
        <img src="afbeelding.png" alt="afbeelding" />
        <div class="tekst">
            <p>Tewefjwoejgi wjgiowje iogjwioej goiwejgioj woegjio</p>
        </div>
    </li>
    <li>
        <img src="afbeelding.png" alt="afbeelding" />
        <div class="tekst">
            <p>Tewefjwoejgi wjgiowje iogjwewdg iowejgio jwoiegj oiwjoegioej goiwejgioj woegjio</p>
        </div>
    </li>
</ul>

Но пользователь сайта может задать текст в div классе tekst. Теперь у меня есть li предметов с 2 словами в тексте div класса. Но также li элементы с большим количеством текста в div.text.

Текст класса div имеет цвет фона. Я хочу сделать каждый div одинаковой высоты.

Как мне добиться этого с помощью Javascript или jquery? То есть div класс tekst имеет высоту самого большого div класса tekst?

Answer 1

На странице jQuery 'Plugin Authoring' есть этот удобный плагин:

(function( $ ){

  $.fn.maxHeight = function() {

    var max = 0;

    this.each(function() {
      max = Math.max( max, $(this).height() );
    });

    return max;
  };
})( jQuery );

, который принимает набор элементов и возвращает высоту самого высокого.Используйте это так:

$('div.tekst').height($('div.tekst').maxHeight() + 'px');

Answer 2

С простым CSS трудно создавать элементы одинаковой высоты, если вы не можете использовать таблицу или display: table-cell.

Другие опции:

1. Назначьте фиксированную высоту и overflow: hidden, чтобы убедиться, что большие элементы div не протекают. Добавьте событие onmouseover в div и покажите полную версию.

2. Просто назначьте большую высоту всем DIV

3. Рендеринг всех DIV рядом друг с другом, а затем присвойте им высоту контейнера с помощью JavaScript (контейнер получит высоту самого высокого дочернего элемента).

Answer 3

Не совсем ясно, что вы пытаетесь достичь, но в догадках, почему бы не использовать CSS?

.BiggestDivClass
{
    height:64px; /* replace with the desired height */
    max-height:64px; /* play it safe? */
}

Если ваши существующие скрипты не управляют стилями во время выполнения, этого вполне может быть достаточно.

Answer 4

Вы действительно не установили бы высоту с помощью JavaScript, но с помощью CSS.Вы можете создать класс, который определяет это, и применить его с чем-то вроде.

$('div').addClass("heightClass");

или вы можете применить приписанный стиль.

$('div').attr("style", "height:100px;");

Answer 5

Вам нужно будет захватить все элементы $('.tekst') на странице и найти наибольшую высоту, используя var myHeight = $('.tekst').height();

Затем вы можете установить высоту, используя $('.tekst').height(myHeight);

Тогда вы можете использовать карусель, как только выполнили вышеуказанные вычисления.

Чтобы перебирать элементы текста на странице, вы можете использовать .each ();

Ссылка: http://api.jquery.com/each/

Надеюсь, это поможет.