Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery oder CSS alle Elemente in einer Gruppe auf die gleiche Höhe bringen?
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:
$(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!