jQueryで複数の要素の高さを揃える

またも嵌ったのでメモ。 今回はULリストの子要素LIの高さを揃えようとやってみた。

$('ul').each(function(){
 var rep = 0;
 $(this).children().each(function(){
  var itemHeight = parseInt($(this).height());
  if(itemHeight > rep){
   rep = itemHeight;
  }
 });
 $(this).children().css({height:(rep)});
});

こんな感じ（で合ってるはず）。
 ローカル環境で正常に動作したのでリモートにアップしたらなぜか正確に高さを測ってくれない。しかもChromeだけ！ いろいろ調べてみたところ、どうもロード時間に問題があるらしい。

結論としては：

• 高さを揃えたりするなら、ページが全てロードされた後に計算させないと正しく動かない（こともある）。
• $(window).load()で対処。

jQuery(function($) {
    $(window).load(function() {
  $('ul#sample').each(function(){
   var rep = 0;
   $(this).children().each(function(){
    var itemHeight = parseInt($(this).height());
    if(itemHeight > rep){
     rep = itemHeight;
    }
   });
   $(this).children().css({height:(rep)});
  });
 });
});

これはローカル環境だとページロードが早かったから表面化しなかった問題。
論理的に考えれば理屈はわからなくはないんだけど、IE,Firefox,Operaで動いてChromeが動かないのは初めての現象でびっくりした。逆は多いのに・・・（苦）
Chromeの方が正しくjavascriptを理解してるってことなの、これ？