jQueryでブロック要素の高さを揃えてみる

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。

というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。

できたものは以下です。

jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば $('.box')、「"wrap01"というidを持つ要素の子であるdiv要素」であれば $('#wrap01 > div') という風に簡単に書けます。セレクタのグループ化(,での連結)にも対応しているので、"ad", "main", "nav"といった別々のidを持つ要素を集める、という場合も $('#ad, #main, #nav') と書けます。あとはその取得した要素群に対して flatHeights() メソッドを実行するだけです。

<script type="text/javascript">
$(function() {
    $('.box1').flatHeights();
    $('#wrap01 > div').flatHeights();
    $('#ad, #main, #nav').flatHeights();
});
</script>

また、デイジー　デイジー - prototype.jsのElement.getHeight()を利用してn個づつブロックを横に並べていくの記事に書かれていたような、「不定個数のブロック要素に対して、n個ずつのブロックごとに高さを揃える」という場合にも、スクリプトの書きようによって対応することができます。(サンプルではあまりスマートに書けてませんが……)

※ $(function() { ... }); というのは、HTML文書の読み込み完了後に処理を実行するためのjQueryにおける書き方です。

※ セレクタの文法の詳細についてはjQuery のドキュメントをご参照ください。

* * *

heightLine.jsでは単に高さを揃えるだけでなく、「1秒ごとに文字の大きさを確認し、大きさが変わっていたらブロック要素の高さもそれに合わせて揃えなおす」という機能があります。jquery.flatheights.jsにもその機能を取り入れていますが、より汎用的に使えるように、「文字の大きさが変化した時に実行したい処理を追加する」という機能を $.changeLetterSize.addHandler(func) として実装してみました(スクリプトの前半部分です)。できればもう少しイベントハンドラの追加っぽくなるように実装したかったのですが、それは今後の課題としたいと思います。

その他抱えている課題: