elemento con la altura máxima de un conjunto de elementos

Tengo un conjunto de elementos div . En jQuery , me gustaría poder encontrar el div con la altura máxima y también la altura de ese div . Por ejemplo:

 
Line 1 Line 2
Line 1
Line 2
Line 3
Line 4
Line 1
Line 1 Line 2

Al observar lo anterior, sabemos que el segundo div (con 4 líneas) tiene la altura máxima de todas. ¿Cómo puedo descubrir esto? ¿Podría alguien ayudarme?

Hasta ahora lo he intentado:

$("div.panel").height() que devuelve la altura de la primera div .

Utilice .map() y Math.max .

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

Si eso es confuso de leer, esto podría ser más claro:

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

El html que publicaste debería usar algunos elementos para tener divs con diferentes alturas. Me gusta esto:

 
Line 1
Line 2
Line 1
Line 2
Line 3
Line 4
Line 1
Line 1
Line 2

Aparte de eso, si quieres una referencia al div con la altura máxima, puedes hacer esto:

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

Si quieres reutilizar en varios lugares:

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

Entonces puedes usar:

 maxHeight($("some selector")); 
 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; } 
  

  • Line 1
    Line 2

  • Line 1
    Line 2
    Line 3
    Line 4

  • Line 1

  • Line 1
    Line 2

Intente averiguar la altura de los divs y establecer la altura de div (similar al que Matt publicó pero utilizando un bucle)

Si estaba interesado en clasificar por completo en JavaScript estándar, o sin usar 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; } 
 

  • Line 1
    Line 2

  • Line 1
    Line 2
    Line 3
    Line 4

  • Line 1

  • Line 1
    Line 2