Question

我正在尝试遍历页面上的多个列表，并且根据每个列表的项目数量，我想获得每个li的高度并设置最大高度（对于5个项目）并设置滚动条。 / p>

我有以下脚本通过找到的每个列表并正确返回长度，但我无法获得每个li的高度。谢谢你的帮助。

JQUERY ::

        $(".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' });
            }
        });

Answer 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>

我希望这可以解决你的问题...

Jquery - 遍历多个列表

1 个答案: