循环遍历容器的每个div并比较高度索引

Question

如果标题的拼写有任何错误，真的很抱歉。但我需要帮助循环遍历2个主div和它们的子div。这是代码示例：

<div class="containers">
<div class="columns">Content 1</div>
<div class="columns">Content 2</div>
<div class="columns">Content 3</div>
</div>
<div class="containers">
<div class="columns">Content 1</div>
<div class="columns">Content 2</div>
<div class="columns">Content 3</div>
</div>

我需要的是jquery循环通过first.contains并获得第一个子元素的高度，然后循环到second.contains，获得第一个子的高度，比较两个高度，并将哪个是最大高度应用于.contains的两个第一元素。现在转到.contains的第二个索引，比较高度并将最大高度应用于两个第二索引，依此类推

Answer 1

试试这个

$(document).ready(function() {
let $container2Columns = $('#container2 .columns');
$('#container1 .columns').each(function(i){
let $relatedColumn = $container2Columns.eq(i);
let maxHeight      = Math.max($(this).height(), $relatedColumn.height());
$(this).height(maxHeight);
$relatedColumn.height(maxHeight);
});
});

.columns {
width: 100px;
background: #000;
display: inline-block;
margin: 0 5px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers" id="container1">
<div class="columns" style="height: 100px;">Content 1</div>
<div class="columns" style="height: 400px;">Content 2</div>
<div class="columns" style="height: 300px;">Content 3</div>
</div>
<div class="containers" id="container2">
<div class="columns" style="height: 150px;">Content 1</div>
<div class="columns" style="height: 200px;">Content 2</div>
<div class="columns" style="height: 300px;">Content 3</div>
</div>