Dynamisch gleiche Höhe zu listen-item (li) als höchste Li mit plain Javascript setzen

Question

Höhe des Li-Block wird dyanamic und variieren, so brauchen Sie ein einfaches Javascript, um Höhe für alle anderen li's nach dem höchsten. Sogar Li's Zählung wird variieren.

neu in Javascript wird jede Hilfe geschätzt. Es gibt viele Sols in jQuery, aber in reinem Javascript benötigt, und ich habe eine mentale Blockade erreicht. Vielen Dank im Voraus!

Folgende ist mein HTML-Markup

<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

Dies ist die Logik, die erforderlich ist, das gewünschte zu tun.

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); 
}); 

Das kann leicht in einfachen JavaScript-Code konvertiert werden.

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