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

• Jezen Thomas: That is so damn cool. I feel there's plenty to learn from this. Thanks!
• Jezen Thomas: I'm editing in a fix.