Question

请查看此FIDDLE。我有两对无序列表，每个列表都在div元素.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>

Answer 1

您只需要获取当前 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，所以这只是一个“快速修复” - 但在我没有第一次听到之前，我不想再考虑更复杂的事情了一个令人信服的论证为什么这个数据首先没有使用表进行标记......？）

获取列表在div元素内等于高度

1 个答案: