Bagaimana Membuat Semua Elemen dalam Kumpulan Ketinggian yang Sama dengan jQuery atau CSS?

Mencari Elemen Tertinggi dalam Semua Menggunakan jQuery atau CSS

Soalan:

Bagaimana kita boleh menggunakan jQuery atau CSS untuk tentukan kumpulan unsur (DIV) tertinggi dan tetapkan kesemuanya kepada yang sama ketinggian?

Penyelesaian Menggunakan jQuery:

1. Gunakan gelung untuk mengulangi setiap elemen dan kenal pasti yang paling tinggi dengan membandingkan ketinggiannya.
2. Tetapkan ketinggian elemen yang tinggal untuk sepadan dengan ketinggian yang paling tinggi elemen.

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

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

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

Versi 2 (Pembersih Menggunakan Pengaturcaraan Fungsian):

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

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

Penyelesaian Menggunakan JavaScript Vanila (tanpa 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";
});

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

Kesimpulan:

Kaedah ini berkesan memastikan set DIV mempunyai ketinggian yang sama, tanpa mengira kandungannya, menggunakan jQuery, vanila JavaScript, atau ES6.

Atas ialah kandungan terperinci Bagaimana Membuat Semua Elemen dalam Kumpulan Ketinggian yang Sama dengan jQuery atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!