如何使用 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中文网其他相关文章！