ホームページ > ウェブフロントエンド > CSSチュートリアル > jQueryまたはCSSを使用してグループ内のすべての要素を同じ高さにする方法は?

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

Barbara Streisand
リリース: 2024-11-12 13:06:02
オリジナル
666 人が閲覧しました

How to Make All Elements in a Group the Same Height with jQuery or 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート