Question

li块的高度将是动态的并且是变化的，因此需要一个普通的javascript来设置所有其他li的高度。即使李的数量也会有所不同。

新的javascript任何帮助将不胜感激。在jquery中有很多solns，但在纯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;
}

使用普通的javascript按照最高的li动态设置相同的高度到list-item（li）

1 个答案: