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

Question

我正在尝试拼凑一块Jquery，它将查找父级的子级，并使子级与父级中最高的子级具有相同的高度。

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

See here

如上所示，全宽列的高度与右下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>

Answer 1

我认为您应该遍历父母而不是所有孩子。这样，您可以计算每个父母的最大身高

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