Wie kann ich mit jQuery oder CSS alle Elemente in einer Gruppe auf die gleiche Höhe bringen?

Das höchste aller Elemente mit jQuery oder CSS finden

Frage:

Wie können wir jQuery oder CSS verwenden, um Bestimmen Sie den höchsten Wert einer Gruppe von Elementen (DIVs) und setzen Sie alle auf den gleichen Wert Höhe?

Lösung mit jQuery:

1. Verwenden Sie eine Schleife, um jedes Element zu durchlaufen und das höchste durch Vergleich seiner Höhen zu identifizieren.
2. Stellen Sie die Höhe der übrigen Elemente so ein, dass sie mit der Höhe des höchsten übereinstimmt element.

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

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

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

Version 2 (Cleaner Using Functional Programming):

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

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

Lösung mit Vanilla JavaScript (ohne 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";
});

Verwenden 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`);

Schlussfolgerung:

Diese Methoden stellen mithilfe von jQuery und Vanilla effektiv sicher, dass eine Reihe von DIVs unabhängig von ihrem Inhalt die gleiche Höhe haben JavaScript oder ES6.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery oder CSS alle Elemente in einer Gruppe auf die gleiche Höhe bringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!