jQueryまたはCSSを使用してグループ内のすべての要素を同じ高さにする方法は?

jQuery または CSS を使用してすべての要素の中で最も高い要素を見つける

質問:

jQuery または CSS をどのように使用すればよいでしょうか要素のグループ (DIV) の最も高いものを決定し、それらをすべて同じに設定します。 height?

jQuery を使用した解決策:

1. ループを利用して各要素を反復処理し、高さを比較して最も高い要素を特定します。
2. 残りの要素の高さを最も高い要素の高さに合わせて設定します。 element.

$(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);
});

バニラ 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、バニラを使用して、内容に関係なく、一連の DIV の高さが同じであることを確認します。 JavaScript または ES6。

以上がjQueryまたはCSSを使用してグループ内のすべての要素を同じ高さにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。