Dynamically set equal height to list-item ( li ) as per tallest li using plain javascript

Question

Height of the li block will be dyanamic and varying, so need a plain javascript to set height for all other li's as per the tallest. Even li's count will be varying.

new to javascript any help will be appreciated. There are many solns in jquery but needed in pure javascript and i have reached a mental block. Thanks in advance!

Following is my 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

This is the logic that is required to do the desired.

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

Which can easily be converted to plain javascript code.

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