jQuery equal heights

Question

Hi, I'm trying to set a height on an h3 based on the tallest version of it's siblings. That bit's not too tricky. But what I need to do is to create it by only certain siblings.

I have a list that CSS puts into row's of 3. The last li on each row has the class of 'endRow'. What I need to do, i think, is to find the 'endRow', then use each() and go back two elements and check the h3 heights. Anyone know of a simple(ish) way of doing it?

Ta

Update here's a sample of the markup. It's not an equal height for every h3, just in each row

<ul>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 2</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li class="endrow">
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 3</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li>
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>
<li class="endrow">
    <a href="#"><img src="images/x.jpg" alt=""></a>

    <h3><a href="#">Item 1</a></h3>

    <div class="productOptions">
        <p>Info</p>

        <p>More info</p>

        <p>Even more info</p>
    </div>
</li>

Answer 1

You can get the height of an element as follows:

var height = element.offsetHeight;

Answer 2

here is jquery plugin

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

This would be good for complex to simple problem.

Answer 3

Without some example markup it is a little hard to follow what you want exactly. At first I thought you had something like:

<h3>
<li>
<li>
<li class="endRow">
<h3>
<li>
...

and you needed to look at the height of each <li> and set the preceding <h3> to the tallest. For that I would be using prevUntil with something like:

var h=0;
$('.endRow').each(function(){
   $(this).prevUntil($('h3')).each(function(){
       if ($(this).attr('offsetHeight')>h) {
          h = $(this).attr('offsetHeight');
       }
       if ($(this).prev().nodeName == 'H3') {
          $(this).prev().css('height',h);
          h=0;
       }
   })
});

Note that is just pseudo and it entirely depends on your markup.

Then I thought maybe you meant you had multiple columns, that looked like:

<h3>
<li>                 <li>                  <li>
<li>                 <li>                  <li>
<li class="endRow">  <li class="endRow">   <li class="endRow">

If that is the case, then I would use the the nth child selector and some code that looks like:

var h=0;
$('h3 ul').each(function(){
    var first = $(this + "li:nth-child(0)").attr('offsetHeight');
    var second = $(this + "li:nth-child(1)").attr('offsetHeight');
    var third = $(this + "li:nth-child(2)").attr('offsetHeight');
    // do whatever your doing with the heights here
    h=first;
    // if im really awake, this refers to ul, so the prev will be the h3
    $(this).prev().css('height',h);
    });

Answer 4

The jQuery documentation for .map() has a demo (last one) with this function that works nicely:

$.fn.equalizeHeights = function(){
 return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}

Answer 5

You can try the following function I wrote some time ago, should work fine.

Pass the container element, it looks for the item element you specify and gets the biggest height value, sets the container element height. And/Or you can set the Inner Elements also.

Usage:

setHeightMax('ul', 'li', 20,true,'li');

Function:

function setHeightMax(divContainer, lookFor, extraPadding,setInnerContainerHeights, innerContainer) {
    $(function () {
        var tempHeight = 0;
        var containerIDHeight = 0;
        $.each($(divContainer).find(lookFor), function (key, value) {
            tempHeight = $(value).height() + extraPadding;
            if (tempHeight >= containerIDHeight) {
                containerIDHeight = tempHeight;
            }
        });
        $(divContainer).css('height', containerIDHeight + 'px');

        if (setInnerContainerHeights)
            $(divContainer).find(innerContainer).css('height', containerIDHeight + 'px');
    });
}