jQuery

jQuery display:noneのエレメントに.width().height()を使う時の注意

ボタンで表示/非表示ができるセル状に並んだボックスの、横一列で一番高いheightで高さを揃えようと、何も考えずに以下のように

//高さ調整
var max_height = 0;
_parents.each( function(){
    if ($(this).height() > max_height) {
        max_height = $(this).height();
    }
});
_parents.height(max_height);

とやっていたら、もともとdisplay:inline-blockがCSSで定義されているのに、非表示から表示へ切り替えると
 ■ ■ ■
と並んでいたものが
 ■
 ■
 ■
となってしまう。

ブラウザでエレメントを眺めてみると、非表示のボックスのstyle属性にdisplay:blockが追加されていました。

謎を解明しようとググってみるとjQueryのリファレンスに以下の記述がありました。
Note: Although style and script tags will report a value for .width() or .height() when absolutely positioned and given display:block(抜粋)

てきとーほんやく
「残念ながら、.width().height()は値の報告の際に、styleタグとscriptタグを絶対座標にしてdisplay:blockを付与します」

なんと、破壊的なファンクションだったのね・・・