Получение наибольшей высоты группы divs

Question

Мне нужно найти высоту самого большого div в группе divs с именем класса termPanel. Как я могу получить доступ к каждому разделу termPanel в массиве терминов?

function resizePanelsToBiggest(){ 

     var maxheight = 0; 

     var terms = $('.termPanel'); 

     for(var i = 0;i<terms.length;++i){ 

      if(maxheight < terms[i].height){ 
       maxheight = terms[i].height; 
      } 


     } 

    } 

Answer 1

Проверить это демо:

resizePanelsToBiggest(); 
 
    
 
function resizePanelsToBiggest() { 
 
    var maxheight = 0; 
 
    var terms = $('.termPanel'); 
 
    terms.each(function(ndx){ 
 
     \t if ($(this).height() > maxheight) { 
 
     \t maxheight = $(this).height(); 
 
     } 
 
    }); 
 
    console.log(maxheight); 
 
}

.termPanel { 
 
    width: 90px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    color: white; 
 
} 
 

 
.termPanel:nth-of-type(even) { 
 
    background: black; 
 
} 
 

 
.termPanel:nth-of-type(odd) { 
 
    background: red; 
 
} 
 

 
.termPanel:nth-of-type(1) { 
 
    height: 100px; 
 
} 
 

 
.termPanel:nth-of-type(2) { 
 
    height: 250px; 
 
} 
 

 

 
.termPanel:nth-of-type(4) { 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="termPanel"></div> 
 
<div class="termPanel"></div> 
 
<div class="termPanel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut temporibus reiciendis officia veniam quos id velit quibusdam, asperiores ipsum. Obcaecati illum, hic facere repellat dolor modi commodi eum tenetur voluptas veritatis expedita consequuntur repellendus provident error, nisi quos! Aliquid error consectetur voluptates ea dicta, vero, dolores numquam, rerum quasi molestias nemo. Explicabo tenetur, omnis quos unde iusto, necessitatibus consectetur, dolorem deleniti atque doloremque repellendus earum quae sit sint, inventore nesciunt sapiente perspiciatis voluptatum corporis soluta at fugiat. Delectus excepturi unde eos deleniti soluta natus commodi ipsum sit et veniam! Eius aut, ut, ad commodi at esse facere asperiores repellat labore alias nostrum, consequatur tempora illo quasi. Nulla deleniti, mollitia soluta, repellat fugiat officiis voluptatibus odio distinctio libero, illo delectus obcaecati!</div> 
 
<div class="termPanel"></div>

Answer 2

Использование Math.max.apply

function resizePanelsToBiggest() { 
    var maxheight = 0; 
    var terms = $('.termPanel'); 
    var allH = terms.map(function() { 
    return $(this).height(); 
    }).get(); 
    var maxH = Math.max.apply(null, allH); 
    console.log(maxH); 
} 

Answer 3

Таким образом, кажется, немного проще и понятнее мне:

function returnHighest() { 
 
    var maxH = 0; 
 
    $('.termPanel').each(function(index, elmt){ 
 
     var elmtH = $(elmt).outerHeight(); 
 
     if (elmtH > maxH) { 
 
      maxH = elmtH; 
 
     } 
 
    }); 
 
    return maxH; 
 
} 
 

 
var h = returnHighest(); 
 

 
$('.termPanel').css('height', h);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="termPanel" style="float:left;width:50px;border:2px solid red"></div> 
 
<div class="termPanel" style="float:left;width:50px;border:2px solid green"></div> 
 
<div class="termPanel" style="float:left;width:50px;border:2px solid blue"></div> 
 
<div class="termPanel" style="float:left;width:300px;border:2px solid red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut temporibus reiciendis officia veniam quos id velit quibusdam, asperiores ipsum. Obcaecati illum, hic facere repellat dolor modi commodi eum tenetur voluptas veritatis expedita consequuntur repellendus provident error, nisi quos! Aliquid error consectetur voluptates ea dicta, vero, dolores numquam, rerum quasi molestias nemo....</div>