jQuery Set height of 2 independent lists first list li the same height as second li

Question

I have this HTML code:

<div class="inner">
    <div class="label fivecol">
        <ul class="extraQuestionName">
            <li>Amount Of Bedrooms</li>
            <li>Year Built:</li>
            <li>Amount Of Bathrooms</li>
            <li>City:</li>
            <li>Amount Of Stables</li>
            <li>Amount Of Paddocks</li>
            <li>Approximate Acres:</li>
        </ul>
    </div>
    <div class="data sevencol last">
        <ul class="extraQuestionValue">
            <li>2-4</li>
            <li>2005</li>
            <li>0-2</li>
            <li>Norwich</li>
            <li>0 - 2</li>
            <li>5 - 7</li>
            <li>5</li>
        </ul>
    </div>
</div>

I require the second lists li element to be the same height as that matched li from the first list if that makes sense.

These elements are dynamic and the amounts of the list items change but they always come in matched pairs.

Does anyone have any idea how I could accomplish this in jQuery as I really have no idea.

Cheers.

Answer 1

http://jsfiddle.net/EvspT/

$(document).ready(function() {
    $('.extraQuestionName li').each(function(i) {
        $('.extraQuestionValue li').eq(i).height($(this).height());
    });
});

The each() function has an index parameter. This loops through the li elements in the first list, and uses eq() to find the item with the same index in the second list, then set the height.