divやli要素等を横並びにした時に高さを揃える方法 #JavaScript

divやli要素でテキストや画像を表示します。
横並びにすると、その内容量によって高さが異なってガタガタしてカッコ悪い。
そこで作ってみた。 http://jsfiddle.net/EDwtn/1/

jQueryの便利なライブラリが沢山出てるけど、シンプルに考えたくて手組。
CSSのdisplay:tabel-cellを使う方法もあるけど、要素の間隔を設定できない問題もあるのでJavaScriptで設定。

IE7～10,FireFox,Safari,Chrome,Operaで試して問題なく動作する模様（Windowsだけど）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
</head>
<style>
ul{
  list-style : none;
  margin     : 0;
}
ul:after {
  content : "";
  clear : both;
  display : block;
}
li{
  float : left;
  height: auto;
  width : 50px;
}
li:nth-of-type(1){background-color : #f00;}
li:nth-of-type(2){background-color : #ff0;}
li:nth-of-type(3){background-color : #f0f;}
li:nth-of-type(4){background-color : #0ff;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  // 要素配列を引数で渡します
  sameHeight($("#test li"));

  function sameHeight(elements){
    var heights = [];
    var len = elements.length;

    if (len > 0){
        // 要素の高さを配列に保持
        // offsetHeightプロパティ：CSSの「height」「padding」「border」を足したピクセル単位の数値
        // clientHeightプロパティ：CSSの「height」「padding」を足したピクセル単位の数値
        for(i = 0; i < len; i++){
          heights[i] = elements[i].offsetHeight;
        }

        // 配列を降順でソート
        heights.sort(function(a, b){
           return (b - a);
        });

        // 最も高さの高い要素に揃える
        for(i = 0; i < len; i++){
          elements[i].style.height = heights[0] + "px";
        }
    }
  }
});
</script>
<body>
<ul id="test">
<li>権威ある本といっても、すべては人の書いたものだ。</li>
<li>決して時計を見るな。 これは若い人に覚えてもらいたいことだ。</li>
<li>私は実験において 失敗など一度たりともしていない。この方法ではうまく行かないということを発見してきたのだ。</li>
<li>私は一日たりとも、いわゆる労働などしたことがない。何をやっても楽しくてたまらないからだ。</li>
</ul>
</body>
</html>

高さを揃えたい要素の高さを配列に保持
高さを保持した配列を降順にソート
並び替えた配列の最初の要素（一番高い高さの数値が入っている）に全部の高さを揃える。

＼(^o^)／できた！