Iterating through each grid row and matching elements to largest height

Question

I have a grid that lists products. The grid is three columns wide, but it could grow to be four or five columns wide. I've written my script to count the columns. The markup is something like this:

<ul>
    <li class="item first">...</li>
    <li class="item">...</li>
    <li class="item">...</li>
    <li class="item first">...</li>
    <li class="item">...</li>
    <li class="item">...</li>
</ul>

In the project, I can't change the markup. I can however write JavaScript/jQuery any which way I please. What I have is working, but I'm using four loops. Since my JS chops aren't too hot, I'm not convinced that what I have is particularly fast or concise.

jQuery(document).ready(function ($) {
"use strict";

var maxItemHeight,
    firstItem = $('.item.first'),
    gridRow = [],
    i;

firstItem.each(function () {
    gridRow.length = 0;
    maxItemHeight = 0;
    gridRow.push($(this));
    $(this).nextUntil(firstItem).each(function () {
        gridRow.push($(this));
    });
    for (i = 0; i < gridRow.length; i++) {
        maxItemHeight = (gridRow[i].find('h2').outerHeight() > maxItemHeight) ? gridRow[i].find('h2').outerHeight() : maxItemHeight;
    };
    for (i = 0; i < gridRow.length; i++) {
        gridRow[i].find('h2').css('height', maxItemHeight);
    };  
});
});

How could this be improved?

Answer 1

Can't say if this is much faster, but it's more concise

jQuery(document).ready(function($) {
    "use strict";

    var firstItems = $('.item.first');

    firstItems.each(function() {
        var $first, row, headings, heights, maxHeight;

        $first = $(this);

        // Get collection of "columns"
        row = $first.add($first.nextUntil(firstItems));

        // Find each column's heading
        headings = row.find("h2"); 

        // Get the heights of the headings
        heights  = headings.map(function () {
            return $(this).outerHeight();
        }).toArray();

        // Get the maximum
        maxHeight = Math.max.apply(null, heights);

        // Set the heading heights to the maximum
        headings.css("height", maxHeight);
    });
});​​​

--Edit--

In my particular instance, the above script had conflict issues with prototype, since it lives inside a Magento install. I sought help and found this improvement.

/Jezen