使多个ul下相对应的li高度一致

DL_Zora 2019-09-09 03:03:07

求大神思路如何能动态获取多个ul下index相同的li的高度找出最大值最后附给每一个index相同的li

<ul>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
<ul>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
<ul>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>

...全文

315 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

DL_Zora 2019-09-09

打赏
举报

已经解决了这个问题谢谢两位大神的回复了特别感谢

文盲老顾 2019-09-09

打赏
举报

弄一个数组，把每个index相同的进行比较即可

        var maxLen = [0];
        $("ul>li").each(function() {
			var index = $(this).index();
			if (maxLen.length<index+1)
			{
				maxLen.push(0);
			}
			if ($(this).height()>maxLen[index])
			{
				maxLen[index]=$(this).height()
			}
        })
        var alls = []
        for (var i = 0 ; i < maxLen.length ; i++) {
            $('ul>li:eq('+i+')').css('height',maxLen[i]+'px')
        }

cn00439805 2019-09-09

打赏
举报


<html>
<body>
    <ul>
        <li style="height:30px;">11</li>
        <li>12</li>
        <li>13</li>
    </ul>
    <ul>
        <li>21</li>
        <li style="height:32px;">22</li>
        <li>23</li>
        <li style="height:22px;">24</li>
    </ul>
    <ul>
        <li>31</li>
        <li style="height:42px;">32</li>
        <li>33</li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var maxLen = 0
        $("ul>li").each((i, o) => {
            maxLen = Math.max($(o).index(), maxLen)
        })
        var alls = []
        for (let i = 0; i <= maxLen; i++) {
            var arr = []
            $("ul").each((i2, o) => {
                var li = $(">li", o).eq(i)
                if (li.length) {
                    arr.push(li)
                }
            })
            alls.push(arr)
        }
        alls.forEach(item => {
            var theMax = Math.max.apply(null, item.map(li => li.height()))
            item.forEach(li => {
                li.height(theMax)
            })
        })
    </script>
</body>
</html>

DL_Zora 2019-09-09

打赏
举报

您好，首先感谢您的回复，根据您的代码我修改了我的源码，现在得到所有的li都是相同的高度了，想请问一下我想根据每一组相同index下的li的最大高度动态调节这一组li的高度应该怎么实现呢

文盲老顾 2019-09-09

打赏
举报


var max_height=0;
$('ul>li').each(function(){
  if ($(this).height()>max_height){
    max_height = $(this).height();
  }
})
$('ul>li').css('height',max_height+'px')