Height Matching Elements in Vanilla JS

index.html

<ul class="sample-class">
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
</ul>

<ul class="sample-class">
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
</ul>

script.js

(function(){
  
  function matchHeight(elementClass){
    
    var sortableList = document.getElementsByClassName(elementClass);
	
    if(sortableList){
    
      var heights = [];
    
      for(var i = 0, x = sortableList.length; i < x; i++){
        if(sortableList[i].style && sortableList[i].style.height){
          sortableList[i].style.height = '';
        }
        heights.push(sortableList[i].clientHeight);
      };
      
      var max = Math.max.apply( Math, heights );
      
      
      console.log(max);
      
      for(var j = 0, y = sortableList.length; j < y; j++){
        sortableList[j].style.height = max + 'px';
        console.log(sortableList[j]);
      }
    };
    
  }
  matchHeight('sample-class');
  
  function run(){
    matchHeight('sample-class');
  }
  
  window.onresize = run;
  
})();

style.css

ul{
  height: auto;
  width: 80px;
  background: gray;
  padding: 40px;
}

zGZyYa.markdown

zGZyYa

A Pen by Jordan Cauley on CodePen.

License.