循环遍历容器的每个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代码：

jQuery(".containers").each(function() { 
jQuery(this).find(".columns").each(function(index) { 
var colHeight = jQuery(this).outerHeight(); 
console.log("Current index is " + index); 
}); 
});

我正在按要求获取索引：0 1 2 0 1 2。我现在如何比较索引0上的列的高度，并在比较后将最大高度应用于两者？并且与下一个索引1、2等相同

Answer 1

您可以将最大高度的值存储在数组中，并在与新大小的进行比较后重新定义与当前索引匹配的所有列的高度

var maxHeightArray = [];
jQuery(".containers").each(function() { 
jQuery(this).find(".columns").each(function(index) {
if (!maxHeightArray[index]) {
maxHeightArray[index] = {
height:0,
columns:[]
};
}

var currentColHeight = jQuery(this).outerHeight();
if (!maxHeightArray[index].height || currentColHeight > maxHeightArray[index].height) {
maxHeightArray[index].height = currentColHeight; 
}

maxHeightArray[index].columns.push(jQuery(this));

jQuery.each(maxHeightArray[index].columns,function() {
jQuery(this).height(maxHeightArray[index].height);
});
}); 
});
console.log(maxHeightArray);

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

我大部分时间都恢复了JavaScript。我发现用较小的函数组合来处理一些任务更容易组织和调试。在下面的示例中，所有六个.col都被分配了从100px到500px的随机高度。然后将每个.box分别迭代两次：一次用于获得每个.col的高度，另一次用于针对每个.col，根据它们的共享索引将它们设置为最大高度。

const ranRng = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
$('.col').each(function() {
let h = ranRng(100, 500);
$(this).height(h);
$(this)[0].innerHTML += `<p>Original Height: ${h}px</p>`;
});
const getH = (node, n = true) => { 
if (n === true) {
return [...node.children];
} 
return [...node.children].map(n => $(n).height());
};
const AB = document.querySelectorAll('.box');
const maxH = (A, B) => {
let a = getH(A, false);
let b = getH(B, false);
let c = a.map((h, i) => Math.max(h, b[i]));
let d = getH(A);
let e = getH(B);
c.forEach((max, idx) => {
$(d[idx]).height(max);
$(e[idx]).height(max);
d[idx].innerHTML += `<p>New Height: ${max}px</p>`;
e[idx].innerHTML += `<p>New Height: ${max}px</p>`;
});
};
maxH(AB[0], AB[1]);

.box {display:flex;}
.col {border:1px solid #000}

<div class="box">
<div class="col">Content 1</div>
<div class="col">Content 2</div>
<div class="col">Content 3</div>
</div>
<div class="box">
<div class="col">Content 1</div>
<div class="col">Content 2</div>
<div class="col">Content 3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>