一般的なjavascriptを使用して最も高いliのリスト項目（li）と同じ高さに動的に設定します

Question

liブロックの高さはダイナミックで変化が多いため、他のすべての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; 
}