Question

I usually use this to match elements heights:

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

    $(function() {
        equalHeight($('.column'));
    });

However, in my case I need to match elements to their nearest sibling not by class, with the following example

    <div class="post">
        <div class="leftCol">
            <h2>This is a post headline</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volut</p>
        </div>
        <div class="rightCol">
            <ul>
                <li></li>
            </ul>           
        </div>
    </div><!--/post-->

There will be multiple (over 15) instances per page of this structure. I don’t want to match the height of “.leftCol” to the height of “.rightCol” across the board – that is I don’t want every “.leftCol” to match every “.rightCol” on the page, just within each “.post” group – match “.leftCol” height to its immediate sibling of the “.rightCol” class… any ideas?

Answer 1

If what you’re trying to do is to set each leftCol/rightCol pair to the taller of either one, but only within the pair and you want to do the same for all pairs, you can do it like this:

$(".post .leftCol").each(function() {
    var $left = $(this);
    var $right = $left.next();
    var maxHeight = Math.max($left.height(), $right.height());
    $left.height(maxHeight);
    $right.height(maxHeight);
});

This code works as follows:

1. For each .post .leftCol object
2. Get the .leftCol jQuery object
3. Get the matching .rightCol jQuery object using .next()
4. Find out the max height between the two of them
5. Set this .leftCol and .rightCol pair each to that max height

Note: you may be able to solve this problem with CSS alone. See CSS – Equal Height Columns?.