Question

我有一个页面会随着类似列表的类别而增长，我需要为一个给定的<ul>组设置Equal Heights。

我的基本HTML是：

<div class="item-list row-1">
    <h2>Row 1</H2>
<ul>
    <li><img src="http://lorempixel.com/output/nature-h-c-153-256-3.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-153-113-5.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-h-c-153-221-1.jpg"></li>    
</ul>

</div>

<div class="item-list row-2">
<h2>Row 2</H2>
<ul>
    <li><img src="http://lorempixel.com/output/nature-q-c-200-95-2.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-152-1.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-96-3.jpg"></li>     
</ul>
</div>

...然后我使用JQuery Equalheights插件：

$(".item-list ul li").siblings().equalHeights(50,400);

...在UL组上设置Equal Height。问题是我似乎无法为页面上的每个无序列表指定Equal Heights。我知道我可以通过定位第1行第2行来理论上做到这一点，然后Equal Heights将特定于每个UL组中最高的元素，但随着UL组的增长，JQuery会变得混乱。

到目前为止，我尝试使用.siblings()来尝试定位每个单独的UL组，但我仍然看到每个ul > li页面集上最高元素的全局高度，无论它在哪里是。

我有一个小提琴：http://jsfiddle.net/highrockmedia/nDLg5/39/

...如果您检查<li>标签，您可以看到它们的高度都设置为260px，但实际上第2行<li>标签的高度设置要小得多。我也玩.closest()，但也没有运气。如果您不熟悉EqualHeights，可以查看here at the docu.

Answer 1

你几乎明白，要将.equalHeights()应用到每个<ul>的li中，请执行以下操作：

$(".item-list ul").each(function() {
    $(this).find('li').equalHeights(50,400);
});

见工作demo（我添加了浅蓝色背景以更好地显示高度）

Answer 2

这就是你想要的吗？

$(".item-list").find('img').css({'height' : '100px'});

Fiddle

还是这个？

$(".item-list").find('ul li *').css({'height' : '100px'});

Fiddle

Answer 3

你可以使用这样的东西： var itemlists = document.getElementsByClassName（'item-list'）;

这将返回一个数组，其中包含所有带有item-list类的元素。

然后你必须简单地走在这个阵列上。

JQuery在具有多个列表的页面上针对Equalheights的单个列表进行定位

3 个答案: