父母无血缘关系的子女的同等身高

Question

我想要两个不相关的div的等高。基本上，我需要把父母B的孩子的身高和父母A的孩子的身高相等。下面是突出显示其内容的图片：

​

​

知道如何用jQuery来完成这个任务吗？我遇到的大多数相同高度的解决方案都是关于同一个父母的孩子的。

我使用的代码是用于容器中的子程序的。

​

$(document).ready(function(){
    $('.containers').each(function(){  
      var min_highestBox = 0;
      $('.columns', this).each(function(){
        if($(this).height() > min_highestBox) {
          min_highestBox = $(this).height(); 
        }
      });               
      $('.columns',this).height(min_highestBox);
    }); 
});

.containers {border:1px solid; width:100%; display:inline-block;}
.columns {border:1px solid red; padding: 20px; min-width:20%; float:left;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
    <div class="columns">This is<br />the highest<br />column</div>
    <div class="columns">One line</div>
    <div class="columns">Four<br />lines<br />the highest<br />column</div>
</div>
<div class="containers">
    <div class="columns">One line</div>
    <div class="columns">Two<br>lines</div>
    <div class="columns">One line</div>
</div>

​

我已经尝试过CSS网格，但在这种特定情况下，CSS网格不是解决方案。

更新:实际容器既独立又相互独立：

​

.a, .b {border:2px solid; padding: 25px; float:left; width: 200px;}
.a div, .b div {border:2px solid red;}

<div class="a">Parent A
<div>Child of A <br> some additional text</div>
</div>

<div class="b">Parent B
<div>Child of B</div>
</div>

​

Answer 1

在不能将它们放置在包装器中的情况下，您可以使用从最低到最高的排序，并对所有受影响的节点应用最高的值，并使用MutationObserver轻松地监视这些节点上的更改，从而再次调用高度调整例程。

对于同等身高的父母：

​

$(document).ready(() => {
  const selector = ".containers";
  function resize() {
    const nodes = $(selector)
          .css("height", "auto")
          .sort((a, b) => $(a).height() - $(b).height()),
      heighest = nodes.last().height();
    if (nodes.first().height() != heighest)
      $(selector).css(`height`, `${heighest}px`);
  }

  resize();

  const observer = new MutationObserver(resize);
  $(selector).each((idx, el) => observer.observe(el, { childList: true, subtree: true }));


  // Examples:
  setTimeout(() => {
    $(".columns").first().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 1500);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 3000);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 5000);
})

.containers {
  border: 1px solid;
  width: 100%;
  display: inline-block;
}

.columns {
  border: 1px solid red;
  padding: 20px;
  min-width: 20%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
  <div class="columns">This is<br>the highest<br>column</div>
  <div class="columns">One line</div>
  <div class="columns">Four<br>lines<br>the highest<br>column</div>
</div>
<div class="containers">
  <div class="columns">One line</div>
  <div class="columns">Two<br>lines</div>
  <div class="columns">One line</div>
</div>

​

对于同等高度的儿童：

​

$(document).ready(() => {
  const selector = ".columns";
  function resize() {
    const nodes = $(selector)
          .css("height", "auto")
          .sort((a, b) => $(a).height() - $(b).height()),
      heighest = nodes.last().height();
    if (nodes.first().height() != heighest)
      $(selector).css(`height`, `${heighest}px`);
  }

  resize();

  const observer = new MutationObserver(resize);
  $(selector).each((idx, el) => observer.observe(el, { childList: true, subtree: true }));


  // Examples:
  setTimeout(() => {
    $(".columns").first().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 1500);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 3000);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 5000);
})

.containers {
  border: 1px solid;
  width: 100%;
  display: inline-block;
}

.columns {
  border: 1px solid red;
  padding: 20px;
  min-width: 20%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
  <div class="columns">This is<br>the highest<br>column</div>
  <div class="columns">One line</div>
  <div class="columns">Four<br>lines<br>the highest<br>column</div>
</div>
<div class="containers">
  <div class="columns">One line</div>
  <div class="columns">Two<br>lines</div>
  <div class="columns">One line</div>
</div>

​

Answer 2

如果您考虑使用额外的包装器，则只需使用CSS即可。

​

.wrapper {
  display: grid;
  gap: 5px;
  grid-auto-rows: 1fr; /* eqaul containers */
}
.containers {
  border: 1px solid;
  display: flex; /* equal childs */
}

.columns {
  border: 1px solid red;
  padding: 20px;
  min-width: 20%;
}

<div class="wrapper">
  <div class="containers">
    <div class="columns">This is<br />the highest<br />column</div>
    <div class="columns">One line</div>
    <div class="columns">Four<br />lines<br />the highest<br />column</div>
  </div>
  <div class="containers">
    <div class="columns">One line</div>
    <div class="columns">Two<br>lines</div>
    <div class="columns">One line</div>
  </div>
</div>

​