如何循环遍历父元素的子元素并将每个子元素与另一个父元素及其子元素的高度进行比较来设置高度？

Question

如何从父元素(

Parent_A

)迭代子元素，并将每个子元素的高度与另一个父元素('Parent_B')及其子元素的高度进行比较以设置高度？

举例来说，我有这个 HTML：

<div class="MainDiv">
    <div class="Parent_A">
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
    </div>
    <div class="Parent_B">    
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
        <div class="childElements">...</div>
    </div>
</div>

我试图弄清楚如何从

Parent_A

中获取子元素并将其与

Parent_B

中的子元素进行比较，并查看哪个子元素的高度最高并设置其 CSS。

例如，我会将

childElement

中的第一个

Parent_A

与

childElement

中的第一个

Parent_B

进行比较，找出这两个之间的最高高度，并将该最高高度设置为第一个

childElement 的 CSS 

来自

Parent_A

和第一个

childElement

来自

Parent_B

。

因此，如果

Parent_A

第一个

childElement

的高度为 20，而

Parent_B

第一个

childElement

的高度为 30。

30px

中的第一个

childElement

和

 中的第一个 

Parent_A

 的高度将设置为 

childElement

 Parent_B

。

然后，我将比较

childElement

中的第二个

Parent_A

与

childElement

中的第二个

Parent_B

，找出这两者之间的最高高度，并将该最高高度设置为

 中第二个 

childElement

 的 CSS Parent_A

和来自

childElement

的第二个

Parent_B

。

等等……

例如，如果

Parent_A

有第18个子元素，但

Parent_B

中没有第18个子元素，那么

Parent_A

上的高度将是

Parent_A

高度。

我的想法是迭代

Parent_A

子元素并将它们保存在数组中，然后迭代

Parent_B

子元素将它们保存在数组中。然后比较每个索引的高度值，例如

Parent_A

child

childElements

[0] 到

Parent_B

child

childElements

[0] 等..

我只是不确定我会如何解决这个问题，或者这种方法是否有效？

我想做这样的事情，但我不知道如何比较两个父母和它的孩子。

$(‘.Parent_A').children('.childElements').each(function () {
   (this.value);
});

$(‘.Parent_B’).children('.childElements').each(function () {
   (this.value);
});

Answer 1

这是一个简单的解决方案。它仅迭代每列的最小数量的子元素，确定父元素 A 和父元素 B 中哪个“兄弟”元素更大，然后在它们两个上设置该高度。

我修改了您的示例数据，将更多元素放入一列中并改变高度，以便效果可见。

let childrenOfA = document.querySelectorAll('.Parent_A > .childElements')
let childrenOfB = document.querySelectorAll('.Parent_B > .childElements')

for (let i = 0; i < Math.min(childrenOfA.length, childrenOfB.length); i++) {
  const rowHeight = Math.max(childrenOfA[i].offsetHeight, childrenOfB[i].offsetHeight)
  childrenOfA[i].style.height = rowHeight + "px"
  childrenOfB[i].style.height = rowHeight + "px"
}

.MainDiv {
  display: flex
}

.childElements {
  border: 1px solid;
  margin: 0.4em
}

<div class="MainDiv">
  <div class="Parent_A">
    <div class="childElements">...</div>
    <div class="childElements">...<br><br><br></div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
  </div>
  <div class="Parent_B">
    <div class="childElements">...</div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
    <div class="childElements">...<br><br><br></div>
    <div class="childElements">...<br><br></div>
    <div class="childElements">...</div>
    <div class="childElements">...</div>
  </div>
</div>