How to check the maximum height of a group of wrapper divs and apply this height to all wrapper divs using JavaScript ?

  1. Identify the wrapper divs you want to target. In your provided HTML code, it seems like the divs with the class “product-item-info” are the wrapper divs.
  2. Use JavaScript to iterate over these wrapper divs and find the one with the maximum height.
  3. Once you have the maximum height, apply it to all the wrapper divs.

Here’s an example code snippet that demonstrates this approach:

javascriptCopy code// Get all the wrapper divs
var wrapperDivs = document.querySelectorAll('.product-item-info');

// Initialize a variable to hold the maximum height
var maxHeight = 0;

// Iterate over the wrapper divs to find the maximum height
for (var i = 0; i < wrapperDivs.length; i++) {
  var height = wrapperDivs[i].offsetHeight;
  maxHeight = Math.max(maxHeight, height);
}

// Apply the maximum height to all the wrapper divs
for (var i = 0; i < wrapperDivs.length; i++) {
  wrapperDivs[i].style.height = maxHeight + 'px';
}

Make sure to place this code after the HTML elements have been loaded, either by placing it at the end of the HTML file or by wrapping it in a function that is called after the document is ready.

Leave a comment

Your email address will not be published. Required fields are marked *