使用纯 javascript 根据最高 li 动态设置列表项 ( li ) 的相等高度

Question

li 块的高度将是动态变化的，因此需要一个普通的 javascript 来为所有其他 li 设置高度，按照最高。就连李的数量也会变化。

对 javascript 的任何帮助将不胜感激。 jquery 中有很多解决方案，但在纯 javascript 中需要，我已经达到了一个心理障碍。 提前致谢！

以下是我的 html 标记

<div class="wrapper" id="wrapper">
    <ul id="outerlist">

        <li class="mainlist"><p>lorem ipsumorem ipsum</p>
            <p>orem ipsumorem ipsumorem ipsumorem ipsum</p>
            <p>orem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumvorem ipsumorem ipsumvorem ipsumorem ipsumorem ipsumorem ipsum</p>
        </li>

        <li class="mainlist"><p>lorem ipsumorem ipsum</p>
            <p>orem ipsumorem ipsumorem ipsumorem ipsum</p>
            <p>ipsumorem ipsumorem ipsumvorem ipsumorem ipsumvorem ipsumorem ipsumorem ipsumorem ipsum</p>
        </li>

        <li class="mainlist"><p>lorem ipsumorem ipsum</p>
            <p>orem ipsumorem ipsumorem ipsumorem ipsum</p>
            <p>orem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumvorem ipsumorem ipsumvorem ipsumorem ipsumorem ipsumorem ipsum</p>

            <div class="innerlist">
                <ul>
                    <li>asdsad</li>
                    <li>asdsad</li>
                    <li>asdsadasdsadasdsad asdsadasdsad</li>
                    <li>asdsad</li>
                </ul> 
            </div>
        </li>
    </ul>

</div>

Answer 1

这是完成所需的逻辑。

var max = -1;
$("li").each(function() {
    var h = $(this).height(); 
    max = h > max ? h : max;
});
$("li").each(function() {
    var h = $(this).height(); 
    $(this).css("height", max);
});

这可以很容易地转换为纯 javascript 代码。

var items = document.getElementById("foo").getElementsByTagName("li");
var max = -1;

for (var i = 0; i < items.length; ++i) {
  var h = items[i].clientHeight;
  max = h > max ? h : max;
}
for (var i = 0; i < items.length; ++i) {
  items[i].style.height=max;
}