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