0

ページ上の複数のリストをループしようとしていますが、リストごとのアイテム数に応じて、各リストの高さを取得し、最大高さ (5 アイテムの場合) を設定してスクロールバーを設定したいと考えています。

見つかった各リストを調べて長さを正しく返す次のスクリプトがありますが、各liの高さを取得できません。助けてくれてありがとう。

Jクエリ::

        $(".list-item").each(function () {

            var sum = 0;

            var getLength = $(this).children().children().children('ol li').length;
            console.log(getLength);
            //Get length of list items and add scroll bar if more than 5
            if (getLength > 5) {
                $(this).addClass('maxLength');

                $('.maxLength ol li:lt(5)').each(function () {
                    sum += $(this).height();
                    console.log(sum);
                });

                $('.maxLength ol').css({ maxHeight: sum + 'px', overflow: 'auto' });
            }
        });
4

1 に答える 1

1

子を数えて高さを設定する代わりに、リストを div で囲み、次の CSS
スタイルを追加できます。

div{
 max-height:125px(your choice);//The height that 5 li elemtns occupies
 overflow:auto;
 display:inline-block;
}
div li{
 line-height:25px(your choice);
}

HTML:

<div>
  <ul> 
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
<div>

これで問題が解決することを願っています...

于 2012-08-21T11:02:24.687 に答える