【jQuery】配列から最大値を求めて、div要素の高さを揃える

jquery

よく対象のdiv要素のCSSで「padding-bottom:1000px; margin-bottom:-1000pxl」することで高さを揃えることができるが、背景などが絡んできたりすると表示されなかったりする。（特にborder-bottomが指定されると表示されない）
てことでjQueryを利用してdiｖの高さを揃えるためのメモ。

Math.maxで最大値を取得

Math.max()で最大値を求められるが、要素の数が決まってないとMath.maxに引き渡せない、そもそも今回は複数の要素の値を配列につっこんでるんで配列で処理できないのでapplyで処理。applyについては下記を参考。検索すればたくさん出てきます。

var hList=new Array();

//各ボックスの高さを取得して配列に保存しておく
$("div.box").each(function(idx){
	//高さを追加					   
	hList[idx]=$(this).height();		 
});

var maxH=Math.max.apply(null,hList);

$("div.box").css({"height":maxH+"px"});
//---------------------------------
});

動作確認

今回はそんな長くないので一気に載せてます。

簡単に説明すると「div.box」の高さをeach関数で各高さを取得して配列につっこんでそれを「Math.max.apply(null,hList)」で配列の中の要素で一番大きい値を取り出してそれを全ての「div.box」要素の高さをcssで指定してます。

動作確認のcssを見れば分かるが「div.box」要素にはあらかじめ「padding」を指定しているので、高さを取得するときに「innerHeight」で取得するとpaddingやborderも含まれてしまう。取得後にcssで高さを設定するときにpaddignも含まれた高さ+もともとdiv.box要素に指定していたpaddingなども追加されてしまうので今回は普通の「height」で処理している