jquery - Jquery - 遍历多个列表

Question

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

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

查询::

        $(".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>

我希望这能解决你的问题......