jQuery Set Height of Element to Highest in the group

Question

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.

This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.

// Find highest element and set all the elements to this height.
    $(document).ready(function () {

    // Set options
    var height = 0;
    var element_search = "#cat_product_list #cat_list";
    var element_set = "#cat_product_list  #cat_list";

    // Search through the elements set and see which is the highest.
    $(element_search).each(function () {
        if (height < $(this).height()) height = $(this).height();
        //debug_(height,1);
    });

    // Set the height for the element(s if more than one).
    $(element_set).each(function () {
        $(element_set).css("height", (height+40) + "px");
    });
});

Any help is much appreciated :)

Answer 1

Try this for setting all of them to the max height:

$(document).ready(function() {
  var maxHeight = 0;
  $("#cat_product_list #cat_list").each(function() {
    if ($(this).outerHeight() > maxHeight) {
      maxHeight = $(this).outerHeight();
    }
  }).height(maxHeight);
});

Update 22/09/16: You can also achieve the same thing without any Javascript, using CSS Flexbox. Setting the container element to have display: flex will automatically set the heights of the elements to be the same (following the highest one).