使用JQuery为每个元素“foreach”更改类的高度

Question

我有一个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/

Answer 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');
}