元素的最大高度从一组元素

小开

最佳答案

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

小开

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

小开

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

小开

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>

小开

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

小开

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

小开

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>

小开

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

});