element with the max height from a set of elements

Question

I have a set of div elements. In jQuery, I would like to be able to find out the div with the maximum height and also the height of that div. For instance:

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

By looking at the above, we know that the 2nd div (with 4 Lines) has the maximum height of all. How do I find this out? Could someone please help?

So far I've 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 that's confusing to read, this might be clearer:

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