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.

Why wouldn't it be the same height ? DO you mean when you click or hover lis ? — Virus721, Jul 19 '13 at 14:35
http://horseytrader.co.uk/category/324/Equestrian-Property.html - You will see that the lists sit side by side. So when one of the label properties overflows onto a second line then the corresponding data list item no longer sits next to that label. — Daniel Cheeseman, Jul 19 '13 at 14:50

score 2 · Accepted Answer · answered Jul 19 '13 at 14:35

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.

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

1 Answers1