如何使用 jQuery 或 CSS 使群組中的所有元素具有相同的高度？

使用jQuery 或CSS 找出所有元素中最高的

問題：

我們如何使用jQuery 或CSS組元素(DIV) 中最高的元素並將它們設定為相同的高度？

使用 jQuery 的解決方案：

1. 利用循環迭代每個元素並透過比較它們的高度來識別最高的元素。
2. 設定剩餘元素的高度以符合最高元素的高度。

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

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

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

版本2（使用函數式程式設計清理）：

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

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

使用Vanilla JavaScript 的解決方案（不含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";
});

使用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`);

結論：

結論：用jQuery、vanilla 有效確保一組DIV 具有相同的高度，無論其內容為何JavaScript，或ES6。

以上是如何使用 jQuery 或 CSS 使群組中的所有元素具有相同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！