jQueryでコンテンツをランダムに入れ替える

HTML

サンプルに例として以下のHTMLを用意しました。

<ul class="contentBox">
  <li>
    <div class="box">
      <h2>見出し1</h2>
      <p class="img"><a href="http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%81%E3%82%B4" target="_blank"><img src="01.jpg" width="220"height="150" alt="いちご"></a></p>
      <p>イチゴ（苺、莓、Fragaria）はバラ科の多年草。食用として供されている部分は花托（花床ともいう）であり果実ではない。</p>
    </div>
  </li>
  <li>
    <div class="box">
      <h2>見出し2</h2>
      <p class="img"><a href="http://ja.wikipedia.org/wiki/%E3%81%AB%E3%82%93%E3%81%98%E3%82%93" target="_blank"><img src="02.jpg" width="220" heigit="150" alt="にんじん"></a></p>
      <p>ニンジンは原産地のアフガニスタン周辺で東西に分岐し、世界各地に伝播した。オランダを通りイギリスへと西方へ伝来しなが</p>
    </div>
  </li>

～～中略～～

</ul>

JavaScript

順序的には

1. ランダムに入れ替えたい要素を配列に入れる
2. 配列をランダムに入れ替える
3. それぞれの要素があったところを一旦削除
4. ランダムに入れ替えた配列を順番に要素があったところに入れる

感じです。

$(function(){
  var randomContent = [];
  $('.contentBox li').each(function() {
    randomContent.push($(this).html());
  });
  
  randomContent.sort(function() {
    return Math.random() - Math.random();
  });
  $('.contentBox li').empty();
    i = 0;
    $('.contentBox li').each(function() {
    $(this).append(randomContent[i]);
    i++;
  });
});