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>
</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.
This question is related to
jquery
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]});
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_
});#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_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>_x000D_
_x000D_
<ul id="list-lines">_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />_x000D_
<br /> Line 1_x000D_
<br /> Line 2_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />_x000D_
<br /> Line 1_x000D_
<br /> Line 2_x000D_
<br /> Line 3_x000D_
<br /> Line 4_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />_x000D_
<br /> Line 1_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />_x000D_
<br /> Line 1_x000D_
<br /> Line 2_x000D_
</li>_x000D_
</ul>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_
}<ul>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">_x000D_
<br> Line 1_x000D_
<br> Line 2_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">_x000D_
<br> Line 1_x000D_
<br> Line 2_x000D_
<br> Line 3_x000D_
<br> Line 4_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">_x000D_
<br> Line 1_x000D_
</li>_x000D_
<li>_x000D_
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">_x000D_
<br> Line 1_x000D_
<br> Line 2_x000D_
</li>_x000D_
</ul>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");
Try Find out divs height and setting div height (Similar to the one Matt posted but using a loop)
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"));
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);
}
});
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 );
});
Source: Stackoverflow.com