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

Really sorry if there is any mistake in typo for title. But I need help in looping through 2 main divs and their child divs too. Here is the code sample:

<div >
    <div >Content 1</div>
    <div >Content 2</div>
    <div >Content 3</div>
</div>
<div >
    <div >Content 1</div>
    <div >Content 2</div>
    <div >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 Can anyone help me that 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.

CodePudding user response：

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 >
    <div >Content 1</div>
    <div >Content 2</div>
    <div >Content 3</div>
</div>
<div >
    <div >Content 1</div>
    <div >Content 2</div>
    <div >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>

CodePudding user response：

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 >
  <div >Content 1</div>
  <div >Content 2</div>
  <div >Content 3</div>
</div>
<div >
  <div >Content 1</div>
  <div >Content 2</div>
  <div >Content 3</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>