Use jQuery to Get Largest Height Value of Children, then Apply that Height Value to All Children

Question

I realize for the most part CSS is the best way to achieve even height elements. However, in certain situations where we are dealing with a page or CMS we don't have full control over, I think a jQuery solution would be very handy.

I'm wondering how I would achieve the following in jQuery. I'm not very familiar with jQuery syntax, but here is my watered down pseudo jQuery / English syntax... Does this make sense, or is there a simpler way of achieving this? I realize the following code does not work in the slightest, it's just my way of trying to contribute towards a solution, and pitch in a bit in the logic department:

$('div.columns')each.get.height;
create an array of the height values
grab the largest value in this array
$('div.columns')each.css(height: $max-height);

Once you stop laughing at my pseudo-code, any ideas? Thanks!!

Answer 1

Try something like this:

var maxHeight = -1;
$('div.columns').each(function() {
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
});
$('div.columns').height(maxHeight);

Note: This is an untested code. But it should have the rudimentary concept in place for you. Your original concept was close, but an array is not needed here if you only want to retain the maximum height value.