请查看此FIDDLE。我有两对无序列表,每对都在div element .pricing-table内部。以下代码可以找到具有相同类的li,获取最大高度并将所有高度设置为相同。但是我想将其限制为获取每个div元素内的每对列表的最大高度。

我认为这行给我带来了问题,因为它正在获取文档中具有相同类的所有列表:

var elems   = $('.pricing-table ul li.' + elem.className),


我不认为我可以使用$(this)并像$(this + elem.className)一样更新它。有什么建议么?

jQuery脚本:

$(document).ready( function(){
    $('.pricing-table 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);
    });
});


的HTML

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

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

最佳答案

您只需要获取作为当前li元素后代的.pricing-table,因此您必须首先迭代后者:

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

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


… 或类似的东西。 http://jsfiddle.net/p3sfy/3867/

(仍然有点丑陋,因为它会多次遍历li,所以这仅仅是一个“快速修复”-但在我没有首先听到令人信服的论点之前,我不想在这里考虑任何更复杂的事情首先不使用表对数据进行标记……?)

10-08 01:08
查看更多