In this simple tutorial, we’re going to show you how you can set all elements with a particular class to the highest element height. To do this, we need to loop through all elements with a particular class, get the highest value, then match all other elements to the same height. We can do this using jQuery as follows:

var maxHeight = 0;

$(".some-element").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".some-element").height(maxHeight);

Awesome, we now have set all elements to the same height. We can take this one step further as elements can change in max height when you are shrinking the browser width for example. What we can do here is use the resize function to update the values.

To make things easier, we can create a function, then call the function both on page load and within the resize function as follows:

var maxHeight = 0;

function matchMaxHeight() {
	$(".some-element").each(function(){
	   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});

	$(".some-element").height(maxHeight);
}

matchMaxHeight();

$(window).resize(function() {
	matchMaxHeight();
});

Pretty straightforward right?

If this tutorial as helped you or if you need some further explanation on the above code, feel free to drop us a comment below and we’d love to assist you.