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    lt div       lt div class  panel         Line 1       Line 2      lt  div       lt div class  panel         Line 1 lt br  gt        Line 2 lt br  gt        Line 3 lt br  gt        Line 4 lt br  gt       lt  div       lt div class  panel         Line 1      lt  div       lt div class  panel         Line 1       Line 2      lt  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

User · Answer

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     quot div panel quot   map function                                                                 return   this  innerHeight         get           Set the height to all  panel elements      quot div panel quot   height  maxHeight

User · Answer

x000D   x000D  ul  li   x000D    list-style  none  x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  ul   x000D    display  flex  x000D    flex-wrap  wrap  x000D    x000D   x000D  ul li   x000D    width  calc 100    3   x000D    x000D   x000D  img   x000D    width  100   x000D    height  auto  x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru sddu7-2560x1600 jpg  alt    gt  x000D       lt br gt  Line 1 x000D       lt br gt  Line 2 x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru mixwall66-2560x1600 jpg  alt    gt  x000D       lt br gt  Line 1 x000D       lt br gt  Line 2 x000D       lt br gt  Line 3 x000D       lt br gt  Line 4 x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru sddu7-2560x1600 jpg  alt    gt  x000D       lt br gt  Line 1 x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru mixwall66-2560x1600 jpg  alt    gt  x000D       lt br gt  Line 1 x000D       lt br gt  Line 2 x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

The html that you posted should use some  lt br gt  to actually have divs with different heights  Like this    lt div gt       lt div class  panel  gt        Line 1 lt br gt        Line 2      lt  div gt       lt div class  panel  gt        Line 1 lt br gt        Line 2 lt br gt        Line 3 lt br gt        Line 4      lt  div gt       lt div class  panel  gt        Line 1      lt  div gt       lt div class  panel  gt        Line 1 lt br gt        Line 2      lt  div gt   lt  div gt    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  gt  hi        hi   h       highest     this                   highest now contains the div with the highest so lets highlight it highest css  background-color    red

User · Answer

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

User · Answer

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   gt  b 1

User · Answer

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

User · Answer

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

User · Answer

Easiest and clearest way I d say is   var maxHeight   0  maxHeightElement   null      panel   each function       if    this  height    gt  maxHeight           maxHeight     this  height           maxHeightElement     this

User · Answer

x000D   x000D  function startListHeight  tag    x000D     x000D      function setHeight s    x000D          var max   0  x000D          s each function     x000D              var h     this  height    x000D              max   Math max max  h   x000D             height     height max   x000D        x000D     x000D        window  on  ready load resize   setHeight  tag    x000D    x000D   x000D  jQuery function      x000D          list-lines   each function     x000D          startListHeight    li   this    x000D          x000D      x000D   list-lines   x000D      margin  0  x000D      padding  0  x000D    x000D   x000D   list-lines li   x000D      float  left  x000D      display  table  x000D      width  33 3334   x000D      list-style-type  none  x000D    x000D   x000D   list-lines li img   x000D      width  100   x000D      height  auto  x000D    x000D   x000D   list-lines  after   x000D      content      x000D      display  block  x000D      clear  both  x000D      overflow  hidden  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt  x000D   x000D   lt ul id  list-lines  gt  x000D       lt li gt  x000D           lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru sddu7-2560x1600 jpg  alt      gt  x000D           lt br   gt  Line 1 x000D           lt br   gt  Line 2 x000D       lt  li gt  x000D       lt li gt  x000D           lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru mixwall66-2560x1600 jpg  alt      gt  x000D           lt br   gt  Line 1 x000D           lt br   gt  Line 2 x000D           lt br   gt  Line 3 x000D           lt br   gt  Line 4 x000D       lt  li gt  x000D       lt li gt  x000D           lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru sddu7-2560x1600 jpg  alt      gt  x000D           lt br   gt  Line 1 x000D       lt  li gt  x000D       lt li gt  x000D           lt img src  http   img2 vetton ru  upl 1000 346 138 vetton ru mixwall66-2560x1600 jpg  alt      gt  x000D           lt br   gt  Line 1 x000D           lt br   gt  Line 2 x000D       lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[jquery] element with the max height from a set of elements

Examples related to jquery