CODEWITHSUNDEEP
jquerycssjquery-selectors
NewUser
NewUser

Reputation: 13313

jQuery make all the container to equal height

I have my markup something like this. Now in this link you can see there are 3 lis inside the ul.In that markup you can see the li class name have first and at the last it is named as last. The li class name last is the last li element of the row. Now as per my requirement I have taken the 3 li's in a row and the next 3 li's in the other row and so on my markup goes.I have around 100 of li's like this way.

Now in that markup you can see inside h3 tags the title is different in length and it is just disturbing the content heights. I can't assign any constant height to any of the container because the title length will be very in each item. So can someone tell me in jQuery how to make the height same for all the other container in every row.

The logic will be something like it will look inside a row means the three li's in a row and whose height is greater then other two it will declare that one as highest height and make the other two li's to that height. In this way we can make all the contents to align as by height . Any help and suggestions will be highly appreciable .

NOTE

I can't change my markup. It will be remain same.

Upvotes: 0

Views: 126

Answers (1)

James
James

Reputation: 12806

This code solves what you've asked for but doesn't line up the buttons that are inside of the LI's which is a different problem. Perhaps you could put the button at the bottom of the LI using CSS relative/absolute positioning to line those up.

http://jsfiddle.net/NWC2Q/10/

$(function() {
  var items = $("ul.products li");
  var rows = items.length / 3;
  if (rows <= 0)
    rows = 1;

  for(var r=0;r<rows;r++)
  {
    normalizeRowHeight(r, items);
  }    
});

function normalizeRowHeight(row, itemSet)
{
  var maxRowHeight = 0; 
  var startIndex = (row == 0 ? 1 : (row + 1) * 3) - 1;
  var endIndex = (startIndex + 2) > itemSet.length ? itemSet.length - 1: (startIndex + 2);

  rowItems = itemSet.slice(startIndex, endIndex);

  var maxRowHeight = Math.max.apply(null, rowItems.map(function(i,e) {
    return $(e).height();
  }).get());

  rowItems.each(function(i) {
    $(this).css('height', maxRowHeight + "px");
  });  
}

Upvotes: 1

Related Questions