jQuery equal heights

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>

       开发者_StackOverflow社区 <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>

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() ))
}

You can get the height of an element as follows:

var height = element.offsetHeight;

here is jquery plugin

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

This would be good for complex to simple problem.

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);
    });

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');
    });
}

Try using This script, if you want equal height use "AjaxHeight" class or change AjaxHeight to your class

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

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".AjaxHeight"));
    });

Update: You could create a function to make any element equal height with any matched selector:

$(document).ready(function(){
  function equalHeights(selector) {
    var newHeight;
    var colHeights = [];
    $(selector).css('height', '');// Clear heights first
    $(selector).each(function(){
      var singleCol = $(this).outerHeight();// Get the outerHeight of a single column
      colHeights.push(singleCol);// Push the single height into the array
      newHeight = Math.max.apply(Math,colHeights);// Get the tallest column from the array
    });
    $(selector).css('height', newHeight+'px');// Apply the tallest height to all columns
  }
});

Usage:

equalHeights('ul li h3');