Element with maximum height from a set of elements

Question

I have a set of div elements. In jQuery I would like to know the div with the maximum height, as well as the height of this div . For example:

 <div> <div class="panel"> Line 1 Line 2 </div> <div class="panel"> Line 1<br/> Line 2<br/> Line 3<br/> Line 4<br/> </div> <div class="panel"> Line 1 </div> <div class="panel"> Line 1 Line 2 </div> &lt/div> 

Looking above, we know that the 2nd div (with 4 lines) has a maximum height. How to find out? Can anybody help?

So far I have tried:

$("div.panel").height() , which returns the height of the 1st div .

Answer 1

Use .map() and Math.max .

 var maxHeight = Math.max.apply(null, $("div.panel").map(function () { return $(this).height(); }).get()); 

---

If this is confusing to read, it might be clearer:

 var heights = $("div.panel").map(function () { return $(this).height(); }).get(); maxHeight = Math.max.apply(null, heights); 

Answer 2

In the html you posted you should use some <br> to actually have divs with different heights. Like this:

 <div> <div class="panel"> Line 1<br> Line 2 </div> <div class="panel"> Line 1<br> Line 2<br> Line 3<br> Line 4 </div> <div class="panel"> Line 1 </div> <div class="panel"> Line 1<br> Line 2 </div> </div> 

In addition, if you want to get a link to a div with maximum height, you can do this:

 var highest = null; var hi = 0; $(".panel").each(function(){ var h = $(this).height(); if(h > hi){ hi = h; highest = $(this); } }); //highest now contains the div with the highest so lets highlight it highest.css("background-color", "red"); 

Answer 3

If you want to reuse multiple places:

 var maxHeight = function(elems){ return Math.max.apply(null, elems.map(function () { return $(this).height(); }).get()); } 

Then you can use:

 maxHeight($("some selector")); 

Answer 4

 function startListHeight($tag) { function setHeight(s) { var max = 0; s.each(function() { var h = $(this).height(); max = Math.max(max, h); }).height('').height(max); } $(window).on('ready load resize', setHeight($tag)); } jQuery(function($) { $('#list-lines').each(function() { startListHeight($('li', this)); }); }); 

 #list-lines { margin: 0; padding: 0; } #list-lines li { float: left; display: table; width: 33.3334%; list-style-type: none; } #list-lines li img { width: 100%; height: auto; } #list-lines::after { content: ""; display: block; clear: both; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="list-lines"> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" /> <br /> Line 1 <br /> Line 2 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" /> <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" /> <br /> Line 1 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" /> <br /> Line 1 <br /> Line 2 </li> </ul> 

Answer 5

 ul, li { list-style: none; margin: 0; padding: 0; } ul { display: flex; flex-wrap: wrap; } ul li { width: calc(100% / 3); } img { width: 100%; height: auto; } 

 <ul> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt=""> <br> Line 1 <br> Line 2 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt=""> <br> Line 1 <br> Line 2 <br> Line 3 <br> Line 4 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt=""> <br> Line 1 </li> <li> <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt=""> <br> Line 1 <br> Line 2 </li> </ul> 

Answer 6

Try to find out the height of the divs and set the height of the div (Just like Matt posted, but using a loop)

Answer 7

If you were interested in sorting completely in standard JavaScript or without using forEach ():

 var panels = document.querySelectorAll("div.panel"); // You'll need to slice the node_list before using .map() var heights = Array.prototype.slice.call(panels).map(function (panel) { // return an array to hold the item and its value return [panel, panel.offsetHeight]; }), // Returns a sorted array var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]}); 

Answer 8

The easiest and most clear way to say:

 var maxHeight = 0, maxHeightElement = null; $('.panel').each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); maxHeightElement = $(this); } });