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

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-12 13:06:02611parcourir

How to Make All Elements in a Group the Same Height with jQuery or 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn