jQuery在具有多个列表的页面上将单个列表定位为等高 [英] JQuery targeting individual lists for Equalheights on a page with multiple lists

问题描述

我的页面会不断增长，并且包含类似列表的类别，并且我需要为单个给定的<ul>组设置相等高度".

I have a page that will be ever growing with categories of similar lists and I need to set Equal Heights for a single given <ul> group.

我的基本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插件:

... and then I use the JQuery Equalheights plugin as such:

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

...在UL组上设置等高.问题是我似乎无法为页面上的每个无序列表指定均等的高度.我知道我可以从理论上针对第1行，第2行进行操作，然后Equal Heights将特定于每个UL组中的最高元素，但是随着UL组的增加，JQuery将会变得混乱.

... to set Equal Height on UL groups. The issue is that I cannot seem to specify Equal Heights for each unordered list on the page. I know I could do this theoretically by targeting row-1, row-2 and then the Equal Heights would be specific for the tallest element in each UL Group but that would get messy for JQuery as the groups of ULs grow.

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

So far I have tried using .siblings() to just try to target each indivdual UL group but I still see the same global height of the tallest element on the page set for every ul > li no matter where it is.

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

I have a Fiddle here: http://jsfiddle.net/highrockmedia/nDLg5/39/

...，如果检查<li>标签，可以看到它们的高度都设置为260px，但实际上第2行<li>标签的高度设置应该小得多.我也玩过.closest()，但是那里也没有运气.如果您不熟悉EqualHeights，可以在文档中的这里查看.

... and if you inspect the <li> tags, you can see they all have a height set to 260px but in reality Row 2 <li> tags should have a much smaller height set. I also played around with .closest() but had no luck there either. If you are not familar with EqualHeights, you can have a look here at the docu.

推荐答案

您几乎理解了这一点，将.equalHeights()应用于每个<ul>中的li，如下所示:

You almost got it, to apply the .equalHeights() to the li's in each <ul> , do like this:

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

查看正在运行的 演示 (我添加了浅蓝色背景以更好地显示高度)

See working demo (I added lightblue background to better show the heights)

这篇关于jQuery在具有多个列表的页面上将单个列表定位为等高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！