How to align blocks in a row in jQuery?

Question

JavaScript

There is a product output, let each product in the list have the .item class.

You need to align these blocks in height. But here's how to do it more elegantly, and in general, what algorithm for comparing block heights is best to use?

In this case, it is desirable to indicate the multiplicity of the comparison. For example, if the output goes for 5 products in a row. So you need to align the blocks not by the maximum height of the same block, but by the maximum value in each row.

Well, that's about it. Please tell me the correct solution

Answer 1

$.fn.setAllToMaxHeight = function() {
  return this.height(Math.max.apply(this, $.map(this.children(), function(e) { 
    return $(e).height();
  })));
};

$('.item').setAllToMaxHeight()

this is how i did it in my working project

$(window).on("load resize", function () {
            var maxHeight = 0;
            $(".equal-group").find(".equal-item").height("auto").each(function () {
                if ($(this).height() > maxHeight) {
                    maxHeight = $(this).height();
                }
            }).height(maxHeight);
        });

Answer 2

https://github.com/mattbanks/jQuery.equalHeights