JQuery 在具有多个列表的页面上针对 Equalheights 的单个列表答案

【问题标题】：JQuery targeting individual lists for Equalheights on a page with multiple listsJQuery 在具有多个列表的页面上针对 Equalheights 的单个列表
【发布时间】：2012-11-10 16:08:17
【问题描述】：

我有一个页面会随着类似列表的类别不断增长，我需要为单个给定的<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 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.

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

你几乎明白了，将.equalHeights()应用于每个<ul>中的li，这样做：

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

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

【讨论】：

是的，完美！谢谢。顺便说一句，不知道 JSfiddle “嵌入式”，这很酷。

【解决方案2】：

这就是你所追求的吗？

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

Fiddle

还是这个？

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

Fiddle

【讨论】：

【解决方案3】：

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

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

那么你必须简单地在这个阵列上行走。

【讨论】：