时间戳

首页 > 解决方案 > 匹配每个父母中孩子的身高

javascript - 匹配每个父母中孩子的身高

问题描述

我正在尝试将一块 Jquery 放在一起，它将找到父母的孩子并使孩子与父母中最高的孩子具有相同的高度。

这是错误的，因为所有孩子的高度都匹配，并且应该唯一地应用于每个父母。

看这里

正如您在上面看到的，全宽列的高度与右下 50% 列的高度相匹配。这不应该发生，全宽列应该应用它自己的高度。

var colHeight = 0;
$('div.column-holder').children().each(function() {
  if ($(this).height() > colHeight) {
    colHeight = $(this).height();
  }
});
$("div.column").height(colHeight);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-holder">
  <div class="column">
    <div class="shadow bg-white">
      <div class="bdr-top-blue"></div>
      <div class="container">
        <h2>Test</h2>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</div>
<div class="column-holder">
  <div class="column">
    <div class="shadow bg-white">
      <div class="bdr-top-blue"></div>
      <div class="container">
        <h2>Test</h2>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="shadow bg-white">
      <div class="bdr-top-blue"></div>
      <div class="container">
        <h2>Test</h2>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtml

解决方案

我认为你应该迭代父母而不是所有孩子。这样你就可以计算每个父母的最大高度

$('div.column-holder').each(function() {
  var parent = $(this);
  var maxHeight = 0;
  parent.children().each(function() {
     if ($(this).height() > maxHeight) {
         maxHeight = $(this).height();
     }
  });
  parent.find("div.column").height(maxHeight);
 });

推荐阅读