jQUery equal columns change by row

Question

Hello,

I use this jQuery function to make the <li> have equal heights.

function equalHeight(group) {
 var tallest = 0;
 group.each(function(index) {
  var thisHeight = $(this).height();
  if(thisHeight > tallest) {
   tallest = thisHeight;
  }
 });
 group.height(tallest);
}

My problem is that they take the height of the tallest one.

My <li>s are displayed in rows of 3 (3rowsx3columns). So if one row has <li>s with small height they get the tallest element height and it's a waste of space.

Is there a way to make the script check for the tallest <li> in every row?

Thank you in advance.

Answer 1

Sounds to me like you might want to go for the pragmatic approach and use <table> for your layout. It might not be semantically correct, but using javascript to solve limitations in CSS isn't much better.

Answer 2

After a lot of tries I've managed to write a script which finds the highest element in each row and applies it to the other elements of the row

function applyEqualHeights(group,itemsPerRow) {
var tallest = 0;
var rows = Math.ceil(group.length/itemsPerRow);
for(var i = 1;i<rows+1;i++) {
    if(i==1) {
        tallest = 0;
        var rowItems = group.filter(":lt("+i*itemsPerRow+")");
    } else {
        tallest = 0;
        var rowItems = group.filter(":lt("+i*itemsPerRow+")").filter(":gt("+((i*itemsPerRow)-(itemsPerRow+1))+")");
    }
    rowItems.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    rowItems.height(tallest);
}

}