Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery oder CSS alle Elemente in einer Gruppe auf die gleiche Höhe bringen?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-12 13:06:02664Durchsuche

How to Make All Elements in a Group the Same Height with jQuery or CSS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn