動態設置相同的高度列表項目（li）按照最高李使用普通javascript

Question

li塊的高度將是dyanamic和不同的，所以需要一個普通的javascript來設置所有其他李的高度爲每個最高。即使李的數量也會有所不同。

新的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; 
}