jQuery. Максимальная высота объектов и событие окна resize

Question

Ребят, имеются секции на сайте в которых расположены bootstrap карточки. В каждой карточке есть тэг параграфа с классом "desc" для описанием. Секций на странице много. Колонок с карточками много, так что с вашего позволения приведу структуру одной секции с карточкой.

<section class="category-products">
    <div class="container">
        <div class="row">
            <div class="col-4">
                 <div class="card">
                     <div class="card-img"><!-- тут картинка --></div>
                     <div class="card-body">
                         <h2 class="title"><!-- тут заголовок--></h2>
                         <p class="desc"><!-- тут описание--></p>
                     </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

jQuery(document).ready(function( $ ){ 

    //все секции с карточками
    var sections = $('section.category-products');

    function resize_desc(sections){
        $(sections).each(function(){
            var elements = $('.desc',this);
            var maxHeight = Math.max.apply(null, $(elements).map(function (){

                 //console.log($(this));
                 //console.log($(this).height());

                 return $(this).height();

            }).get());
           $(elements).height(maxHeight);
        });
    } 
    
    //при закрузки страницы
    resize_desc(sections);

    //при изменении размеров окна
    $(window).on('resize', function(){
        resize_desc(sections);
    });

});

Данный код срабатывает раз, при загрузке страницы, но при изменении размеров окна - нет. В чем моя ошибка? P.S. При вычислении максимальной высоты я закомментировал 2 строчки с логом в консоль. На данный момент у меня на сайте 7 секции по 4 карточки. Если я вывожу в консоль сам объект $(this), то я вижу 28 объектов-параграфов, если я вывожу в консоль $(this).height(), то вижу только 3 высоты.

Answer 1

Если я правильно понял, что Вы хотите сделать

$(document).ready(function ($) {
 //все секции с карточками
  var sections = $("section.category-products");
  function resize_desc(sections) {
    var heights = [];
    $(sections).each(function () {
      var elements = $(".desc .inner", this);
      elements.each(function(){heights.push($(this).height());});
    });
    $(".desc").height(Math.max.apply(null, heights));
  }

  //при закрузки страницы
  resize_desc(sections);

  //при изменении размеров окна
  $(window).on("resize", function () {
    resize_desc(sections);
  });
});

И надо поменять HTML

<section class="category-products">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="card">
          <div class="card-img">Test img</div>
          <div class="card-body">
            <h2 class="title">Test title</h2>
            <div class="desc">
              <div class="inner-desc">
                Lorem Ipsum - это текст-"рыба", часто используемый в печати
                и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
                текстов на латинице с начала XVI века. В то время некий
                безымянный печатник создал большую коллекцию размеров и форм
                шрифтов, используя Lorem Ipsum для распечатки образцов.
                Lorem Ipsum не только успешно пережил без заметных изменений
                пять веков, но и перешагнул в электронный дизайн. Его
                популяризации в новое время послужили публикация листов
                Letraset с образцами Lorem Ipsum в 60-х годах и, в более
                недавнее время, программы электронной вёрстки типа Aldus
                PageMaker, в шаблонах которых используется Lorem Ipsum.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

jQuery. Максимальная высота объектов и событие окна resize

Ответы (1 шт):