0

<ul>同様のリストのカテゴリで成長し続けるページがあり、特定のグループに対して等高さを設定する必要があります。

私の基本的な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 をターゲットにすることで理論的にこれを行うことができることはわかっています。その後、等高さは各 UL グループの最も高い要素に固有のものになりますが、UL のグループが大きくなるにつれて、JQuery にとっては厄介になります。

これまでのところ.siblings()、個々の UL グループをターゲットにするために使用してみましたが、ページ セットの最も高い要素のグローバルな高さは、ul > liどこにいても同じです。

ここにフィドルがあります：http://jsfiddle.net/highrockmedia/nDLg5/39/

...そして<li>タグを調べると、すべてのタグの高さが 260px に設定されていることがわかりますが、実際には行 2<li>タグの高さははるかに小さく設定する必要があります。私も遊んで.closest()いましたが、そこでも運がありませんでした。EqualHeights に慣れていない場合は、こちらのドキュメントを参照してください。

4

3 に答える 3

1

.equalHeights()各 の li にを適用するには、次の<ul>ようにします。

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

実際のデモを参照してください（高さをよりよく示すために水色の背景を追加しました）

于 2012-11-10T16:20:20.210 に答える
0

これはあなたが求めているものですか？

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

フィドル

それともこれ？

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

フィドル

于 2012-11-10T16:15:20.713 に答える
0

次のようなものを使用できます: var itemlists = document.getElementsByClassName('item-list');

これは、item-list クラスを持つすべての要素を含む配列を返します。

次に、この配列の上を歩くだけです。

于 2012-11-10T16:16:07.403 に答える