5

前の質問では<li>、ページ上のULグループの個々のタグに同じ高さを設定しました。しかし、テーマを改善するために<li>、ULグループ内のタグのグループに設定された最も高い高さを取得し、それをそれぞれの親<ul>自体に設定して、ページのテーマを改善したいと思います。ここに新しいフィドル<li>があり、ULグループ内で最も高い高さを見つけてULに設定しようとしています。

問題はまだ特異性です。<li>最初のULグループからの最も高い高さが<ul>ページ上のすべてのタグに設定されています。<li>ULグループ（行1）で最も高い高さは260ピクセルで、行2からの高さは156ピクセルです。ただし、260pxはまだページ上の両方のULタグに設定されています。ULはページ上で大きくなるので、JQueryの各行を指定しなくてもコードを拡張できるようにしたいと思います。これまで私はこれを試しました：

// get the height of the tallest LI within each UL group
    var max = Math.max.apply(Math, $(".item-list ul li").map(
        function(){
          return $(this).height();
        }
      ));

// now render the height in each parent UL

    $(".item-list ul").each(function() {
      $(this).find(".item-list ul").height(max);
    });

...しかし、2番目の部分は機能しません。これは機能しますが...

$(".item-list ul").height(max);

<li>...すべてのULタグのページで最も高い高さを表示します。理想的には、最終的なHTMLは次のようになります。

<div class="item-list row-1">
<ul style="height: 260px;">
etc...

<div class="item-list row-2">
<ul style="height: 156px;">
etc...

以下のこれに基づく作業バージョン

4

3 に答える 3

12

私があなたを正しく理解しているなら、あなたはループでmax操作をするべきです。.each()

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").each(function() {
    var thisULMax = Math.max.apply(Math, $(this).find("li").map(thisHeight));
    $(this).height(thisULMax);
});

また、マップ関数を名前付き関数にして、再利用できるようにしました。

ここに、もう少しクリーンなソリューションがいくつかあります。

height()これは、イテレータとして使用する関数を渡します。物事を少し短くします。

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").height(function() {
    return Math.max.apply(Math, $(this).find("li").map(thisHeight));
});

.reduce()IE8以下の場合はシムが必要ですが、を使用する別の方法があります。

function maxHeight(max, elem) {
    var h = $(this).height();
    return max > h ? max : h;
}

$(".item-list ul").height(function() {
    return $(this).find("li").toArray().reduce(maxHeight, 0);
});
于 2012-11-11T16:09:44.913 に答える
2

複雑に見えますか？

$(".item-list ul").each(function(idx, elm) {
     var LIheight = 0;
     $('li', elm).each(function() {
         if ($(this).height() > LIheight) LIheight = $(this).height();
     }).height(LIheight);
});
于 2012-11-11T16:24:13.590 に答える
0

<ul>クラス'.item-list'のタグが2つあるので、代わりにこれを試してみませんか。

$(".item-list ul").eq(0).height(max);

これにより、HTMLの最初のタグの高さのみが設定されます。

于 2012-11-11T16:13:29.150 に答える