Comment donner à tous les éléments d'un groupe la même hauteur avec jQuery ou CSS ?

Trouver le plus grand de tous les éléments à l'aide de jQuery ou CSS

Question :

Comment pouvons-nous utiliser jQuery ou CSS pour déterminer le plus grand d'un groupe d'éléments (DIV) et les définir tous à la même hauteur ?

Solution utilisant jQuery :

1. Utiliser une boucle pour parcourez chaque élément et identifiez le plus grand en comparant leurs hauteurs.
2. Définissez les hauteurs des éléments restants pour qu'elles correspondent à la hauteur de l'élément le plus haut.

$(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
});

Version 2 (Nettoyeur utilisant la programmation fonctionnelle) :

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

  $('.features').height(maxHeight);
});

Solution utilisant Vanilla JavaScript (sans jQuery) :

var elements = document.getElementsByClassName('features');

var maxHeight = Math.max.apply(null, Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
}));

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

Utilisation ES6 :

const elements = document.getElementsByClassName('features');

const maxHeight = Math.max(...Array.from(elements).map(el => el.clientHeight));

elements.forEach(el => el.style.height = `${maxHeight}px`);

Conclusion :

Ces méthodes garantissent efficacement qu'un ensemble de DIV ont des hauteurs égales, quel que soit leur contenu, en utilisant jQuery, vanilla JavaScript ou ES6.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!