Измените высоту класса с помощью jQuery для каждого элемента "foreach"

ProgramBox

Измените высоту класса с помощью jQuery для каждого элемента «foreach»

Post author:admin
Запись опубликована:27 февраля, 2023
Post category:Вопросы по программированию

#jquery #foreach #height #each

#jquery #foreach #высота #каждый

Вопрос:

У меня есть foreach, который извлекает информацию из processwire. В каждой строке слева есть изображение (class = Img1), а справа — описание внутри div (class = Test2). Я хочу измерить высоту как изображения, так и div, содержащего описание, выбрать самый большой и установить его на высоту div, содержащего изображение (class = Test1). Проблема с фактическим кодом заключается в том, что на первой итерации сохраняется наибольшая высота и применяется ко всем строкам, а не только к первой.

Я знаю, что должен использовать итеративную функцию each(), я пытался понять, как это работает, но безуспешно. Может кто-нибудь мне помочь, пожалуйста?

HTML

     <?php $Ser = $pages->get("name=services");?>
<section id="<?=$Ser->title;?>" class="mea-service-section section-padding-shorter">
  <?php $i = 0;
      foreach($Ser->ServicesRepeater as $Ser):
      $image = $Ser->ServicesRepeaterImage2;

      $colFirst = "";
      // if ($i%3 == 0) $colFirst = 'col_first'; //
      $i  ; ?>
      <div class="container">

    <div class="row mt-10" style="display: flex;">


    <!-- Services Widget Section -->
    <div class='outer-row' id="<?=$Ser->ServicesRepeaterHeadline;?>">
      <div class="col-md-5 mea-title-section wow animated slideInLeft" data-wow-delay=".2s">
      <div class="media-left-center vertical-align Test1">
        <img src="<?=$image->url;?>" alt="<?=$image->description;?>" class="Img1 img-responsive center-block rcorners3">
      </div>
    </div>
    <div class="col-md-7 <?=$colFirst;?> single-service-widget wow animated fadeInUp" data-wow-delay=".3s">
      <div class="Test2">
        <div class="media-body">
          <h2 class="subtitle"><?=$Ser->ServicesRepeaterHeadline ?></h2>
          <p><?=$Ser->ServicesRepeaterDescription ?></p>
        </div>
      </div>
    </div>
    </div>

  </div>
</div>
<?php endforeach; ?>
</section>

jQuery

 var divImgHeight = function() {
  var divHeight = $('.Test2').height();
  var imgHeight = $('.Img1').height();
  if (imgHeight < divHeight) {
    $('.Test1').css('height', divHeight 'px');
  } else {
    $('.Test1').css('height', imgHeight 'px');
  }
}

$(document).ready(function() {

  function resizeLinks(){
    divImgHeight();
  }
  $(window).on("resize", resizeLinks);
  resizeLinks();

    });

Фактическая страница в стадии разработки: https://brightnode.io/en/services /

1. «сохраняется и применяется наибольшая высота» — Нет, это не «самая большая» . Это высота первого сопоставленного элемента с помощью class Test2 (или Img1 ) -> .height() : «Получить текущую вычисленную высоту для первого элемента в наборе сопоставленных элементов»

2. Поскольку у вас есть только одна «строка» в вашем примере HTML, немного сложно определить, где .Test1 .Test2 и .Img1 применять по отношению друг к другу (особенно в сочетании с непоследовательным отступом)

3. Я добавил весь раздел в HTML-код. Теперь вы можете увидеть foreach. Извините!

Ответ №1:

Предполагая, что внешний div — это одна «строка», дайте внешнему div класс, чтобы на него можно было ссылаться:

 <div class='outer-row' id="<?=$Ser->ServicesRepeaterHeadline;?>">
  <div class="col-md-5 mea-title-section wow animated slideInLeft" data-wow-delay=".2s">
    <div class="media-left-center vertical-align Test1">
      <img src="<?=$image->url;?>" alt="<?=$image->description;?>" class="Img1 img-responsive center-block rcorners3">
    </div>
  </div>
  <div class="col-md-7 <?=$colFirst;?> single-service-widget wow animated fadeInUp" data-wow-delay=".3s">
    <div class="Test2">
      <div class="media-body">
        <h2 class="subtitle"><?=$Ser->ServicesRepeaterHeadline ?></h2>
        <p><?=$Ser->ServicesRepeaterDescription ?></p>
      </div>
    </div>
  </div>
</div>

затем выполните цикл .outer-row и примените свой код к каждой строке, используя this для ссылки на строку, например:

 $(".outer-row").each(function() { 

  // at this point "this" is each of the .outer-row divs in turn

  var divHeight = $('.Test2', this).height();
  // or
  var imgHeight = $(this).find('.Img1').height();

предоставление:

 var divImgHeight = function() {
  $(".outer-row").each(function() { 
    var row = $(this);  
    var divHeight = $('.Test2', row).height();
    var imgHeight = $('.Img1', row).height();
    if (imgHeight < divHeight) {
      $('.Test1', row).css('height', divHeight 'px');
    } else {
      $('.Test1', row).css('height', imgHeight 'px');
    }
  });
}

$(document).ready(function() {
  function resizeLinks() {
    divImgHeight();
  }
  $(window).on("resize", resizeLinks);
  resizeLinks();
});

Редактировать

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

 var divImgHeight = function() {
  // get all the heights from .Test2/.Img1
  var heights = $(".outer-row .Test2,.outer-row .Img1").map(function() { return $(this).height(); }).toArray();
  // get the largest height
  var maxheight = Math.max.apply(Math, heights);

  // apply to all .Test1s
  $(".outer-row .Test1").css('height', maxHeight 'px');
}