Tallest height matching next element

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?

score 2 · Accepted Answer · edited May 23 '17 at 09:59

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:

For each .post .leftCol object
Get the .leftCol jQuery object
Get the matching .rightCol jQuery object using .next()
Find out the max height between the two of them
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?.

perfect. you're a friend indeed, thanks man. I am now at least getting the concept mostly right but still suck on execution. — Dirty Bird Design, Feb 03 '12 at 03:41

Tallest height matching next element

1 Answers1