élément avec la hauteur maximale d’un ensemble d’éléments

J’ai un ensemble d’éléments div . En jQuery , je voudrais pouvoir trouver le div avec la hauteur maximale et aussi la hauteur de ce div . Par exemple:

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

En regardant ci-dessus, nous soaps que la 2ème division (avec 4 lignes) a la hauteur maximale de tous. Comment puis-je le découvrir? Quelqu’un pourrait-il s’il vous plaît aider?

Jusqu’à présent, j’ai essayé:

$("div.panel").height() qui renvoie la hauteur de la 1ère div .

Utilisez .map() et Math.max .

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

Si cela peut être difficile à lire, cela pourrait être plus clair:

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

Le html que vous avez posté devrait utiliser certains
pour avoir des div avec des hauteurs différentes. Comme ça:

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

En dehors de cela, si vous voulez une référence à la div avec la hauteur maximale, vous pouvez le faire:

 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 vous souhaitez réutiliser à plusieurs endroits:

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

Ensuite, vous pouvez utiliser:

 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

Essayez de trouver la hauteur et le réglage de la hauteur des divs (similaire à celle affichée par Matt mais en utilisant une boucle)

Si vous étiez intéressé à sortinger entièrement en JavaScript standard ou sans utiliser 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