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.

score 229 · Accepted Answer · edited Aug 14 '18 at 08:18

229

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

edited Aug 14 '18 at 08:18

thothal

16,690
3
36
71

answered May 19 '11 at 15:25

Matt Ball

354,903
100
647
710

1

This finds the highest height but not a reference to the actual element. – Vincent Ramdhanie May 19 '11 at 15:36
You're right; I wasn't clear that the OP wants the element as well. Your answer works in that case. – Matt Ball May 19 '11 at 15:42
Matt: Thank you so much. Yes, all I wanted was the max height and not the reference. – lshettyl May 19 '11 at 16:23
Ah, great! Next time you might want to be a bit clearer in the question - but I guess you got your point across well enough `:)` – Matt Ball May 19 '11 at 16:24
does this code work's if height is not mention in css or earlier in page. – Abdul Basit Jan 20 '14 at 10:01
3

@MattBall Why the get function, may I ask? What does it do and what's its purpose? – chodorowicz Sep 10 '14 at 08:32
2

@chodorowicz glad you asked. See [this answer](http://stackoverflow.com/a/4795529/139010), under the second heading. – Matt Ball Sep 10 '14 at 13:41
1

@MattBall Thanks. So jQuery .map return array-like object and get .get turns it into array. But it seems that Math.max works easily on both of these types (just tested in Chrome console), so in this case .get seems unnecessary. Or am I wrong? – chodorowicz Sep 11 '14 at 09:29
How to deal with 'Infinite'? – Vishal Kumar Sahu Sep 22 '17 at 15:42
What if `div.panel` element loading dynamically ? – Kishan Bharda Nov 26 '20 at 10:58

score 20 · Answer 2 · answered May 19 '11 at 15:35

The html that you posted 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>

Apart from that, if you want a reference to the div with the max 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");

Be careful with this one, if you don't use a jQuery method inside (like `.height` in this case) then you must dereference it, ex: ` $(this)[0].scrollHeight;` — rogerdpack, Oct 21 '17 at 06:08

score 5 · Answer 3 · answered Sep 08 '16 at 11:42

5

If you want to reuse in 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"));

answered Sep 08 '16 at 11:42

Diogo Gomes

2,135
16
13

maestro888 · Answer 4 · 2016-04-16T13:39:53.457

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>

maestro888 · Answer 5 · 2018-03-23T04:02:14.200

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>

score 0 · Answer 6 · answered Mar 14 '17 at 21:29

If you were interested in sorting entirely 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]});

score 0 · Answer 7 · answered Jul 04 '19 at 14:44

0

Easiest and clearest way I'd say is:

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

answered Jul 04 '19 at 14:44

davefrassoni

306
2
5

score 0 · Answer 8 · edited May 23 '17 at 11:47

0

Try Find out divs height and setting div height (Similar to the one Matt posted but using a loop)

edited May 23 '17 at 11:47

Community

1
1

answered May 19 '11 at 15:26

mhy

455
2
6
12

score 0 · Answer 9 · answered Jul 17 '20 at 05:57

This might be helpful, in some way. Fixing some code from @diogo

$(window).on('load',function(){

// get the maxHeight using innerHeight() function
  var maxHeight = Math.max.apply(null, $("div.panel").map(function ()                                                        {
    return $(this).innerHeight();
  }).get());
  
// Set the height to all .panel elements
  $("div.panel").height( maxHeight );
  
});

element with the max height from a set of elements

9 Answers9

Linked

Related