请查看此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
,所以这仅仅是一个“快速修复”-但在我没有首先听到令人信服的论点之前,我不想在这里考虑任何更复杂的事情首先不使用表对数据进行标记……?)