javascript - 通过匹配相同的类名获得 "li"相同的高度

Question

请看一下这个FIDDLE 。我需要在两个无序列表中实现相同的高度。如何获取具有相同类名的 li 的高度(description、year、package、location 等)进行比较，然后给较短的 li 较大的值？

<div class="pricing-table">
                <ul>
                    <li class="heading">Bronze</li>
                    <li class="year">2003<p>(Text)..........</li>
                    <li class="package">Starter package</li>
                    <li class="location">Africa (Text).......)</li>
                    <li class="description">Text............ </li>
                </ul>
</div>
<div class="pricing-table">
                <ul class="feature">
                    <li class="heading">Silver</li>
                    <li class="year">2004</li>
                    <li class="package">Intermediate package</li>
                    <li class="location">Asia</li>
                    <li class="description">Text............ </li>
                </ul>
 </div>

例如，获取具有相同类名description的li，并为较短的一个指定较长的高度。我发现以下代码与我正在寻找的代码非常接近，但它必须使用不同的类。

    $(document).ready( function(){
     var leftHeight = $(".left").height();
     var rightHeight = $(".right").height();
      if (leftHeight > rightHeight){ $(".right").height(leftHeight)}
         else{ $(".left").height(rightHeight)};
    })

Answer 1

迭代第一个列表中的 LI，找到具有相同 className 的其他 LI，获取最大高度并将所有它们的高度设置为相同。

$(document).ready( function(){
    $('.pricing-table:first ul li').each(function(i, elem) {
        var elems   = $('.pricing-table ul li.' + elem.className),
            heights = $.map(elems, function(li) {
                return $(li).height();
            }),
            max     = Math.max.apply(null, heights);

        elems.height(max);
    });
});

FIDDLE