リスト要素の高さを一番高いものに合わせるJQueryプラグインの作り方

要素の高さを一番高いものに合わせるJQueryプラグイン（メソッド）の作り方。リストの場合は例のulのidに$("#s").equalHeight()とするだけで一番高い要素に自動でそろえられる。作成するページによってはよく使われると思うので使い回すと便利。

by iwbjp

HTML

<ul id="s">
	<li>hoge</li>
	<li>hoge<br>hogehoge</li>
	<li>hoge</li>
	<li>hoge</li>
	<li>hoge<br>hogehoge</li>
	<li>hoge</li>
	<li>hoge</li>
	<li>hoge<br>hogehoge<br>hogehoge</li>
	<li>hoge</li>
</ul>

CSS

#s {
	width: 366px;
}

li {
	list-style: none;
	float: left;
	margin: 0 20px 20px 0;
	width: 100px;
	border: 1px solid #000;
	text-align: center;
}

JavaScript

$.fn.equalHeight = function() {
    var maxHeight = 0;
    this.find("li").each(function(i) {
        if(maxHeight < $(this).height()) {
            maxHeight = $(this).height();
        }		
    });
    this.find("li").height(maxHeight);
};
$("#s").equalHeight();