ページ内の同じ種類のコンテナの高さを、最大値に合わせて統一する。
jQueryで同じクラスの複数要素の高さを、各要素の高さの最大値に揃える機能を実装しています。ウィンドウの読み込み時やリサイズ時に処理を行い、レイアウトのズレを防ぎつつ、パフォーマンス改善のためデバウンス処理も導入しています。
同じクラス要素の高さを最大値に揃える jQuery 関数（デバウンス対応）
.map()
map() は、各要素を関数に渡して現在のマッチした集合に適用し、戻り値を含む新しい jQuery オブジェクトを生成します。
function ResizeAll(){
var $box = $('.box');
$box.css({
"height": "auto"
});
$box.height(Math.max.apply(null, $box.map(function () {
return $(this).height();
})));
}関数を作成したら、指定されたイベントで実行（トリガー）すればOKです。
例えば、以下のようになります：
// doc ready 時
$(function(){
ResizeAll();
});
// window の load および resize 時
$(window).on("load resize",function(){
ResizeAll();
});コード解説
.map()関数で各.box要素の高さを取得し、配列化する。- その高さの最大値を算出し、すべての
.boxに対して一括でその高さを適用する。 - 初期化として高さを
"auto"にリセットし、内容の変化に対応。 - 実行はページの読み込み完了時（
document.ready）、およびウィンドウのリサイズやロード完了時に行うことで、動的なレイアウト変更にも対応。
注意点・補足
- コンテンツの動的な追加や削除がある場合は、都度
ResizeAll()を再呼び出しする必要がある。 - 高さ固定がレイアウトを崩すケースもあるため、レスポンシブ対応時は状況に応じて呼び出しを調整。
- CSSの
box-sizing設定によって高さ計算が変わる場合があるので注意。
まとめ
今回のコードは、同じ種類の複数コンテナの高さを揃えるためのシンプルかつ効果的なjQuery実装です。さらに、ウィンドウリサイズ時の多重実行を防ぐデバウンス処理の導入や、対象要素の存在チェック、CSS単位の明示などの工夫により、パフォーマンスと堅牢性が大幅に向上しました。
こうした最適化により、ページの表示崩れや無駄な処理を防ぎ、より安定したユーザー体験を実現できます。動的な要素追加など変化の多い環境でも、適宜関数を再呼び出すことで柔軟に対応可能です。