jQueryで要素の高さを揃える

要素の高さを揃えるのに、何やら面倒なことをしているのを目にしたこともあり、jQueryで簡単に要素の高さを揃えてみる。

Code

$.fn.sameHeight = function(){
  var h = 0;
  return this.each(function(){
    h = Math.max(h, $(this).outerHeight());
  }).height(h);
}

ポイントは『outerHeight』を使っていること。

後はメソッドチェーンで最後に高さの最大値を適用しているところがjQueryらしい。

Usage

$('.foo').sameHeight();

これで高さが揃わなければ、この方法を疑うより、対象要素の構造やスタイルを見直した方がイイかも。