jQuery设置两个独立列表的高度第一个列表li与第二个列表li的高度相同

Question

我有这个HTML代码：

<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>

如果有意义的话，我要求第二个lists-li元素的高度与第一个列表中匹配的li的高度相同。

这些元素是动态的，列表项的数量也会变化，但它们总是成对出现。

有人知道我如何在jQuery中实现这一点吗？因为我真的不知道。

干杯。

Answer 1

http://jsfiddle.net/EvspT/

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

each()函数有一个索引参数。这将遍历第一个列表中的li元素，并使用eq()在第二个列表中查找具有相同索引的项，然后设置高度。