Loop through each div of containers and compare the height on the base of index number

Question

I am trying to loop through 2 main divs and their child divs too. Here is the code sample:

<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>

Applied the following jQuery code:

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

I'm getting index as per required: 0 1 2 0 1 2. How can I compare now the height of columns which are on index 0 and apply max height to both after compare? and same with next index 1, 2 and so on.

Answer 1

you can stored the value of max height in an array an alwas redefine height of all columns matching the current index after comparing with new size

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

I reverted into JavaScript for the most part. I find that having a composition of smaller functions to handle a few tasks easier to organize and debug. In the example below, all six .col are assigned a random height from 100px to 500px. Then each .box was separately iterated twice: once to get the heights of each .col and once to target each .col to set them to max height according to their shared index.

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>