jQueryを使ってコンテンツをランダムに入れ替える

ページのコンテンツをランダムに表示する機能をjQueryを使って作成しました。HTMLには要素の記述が全部書いてある状態なので、JavaScriptがオフでも順序が入れ替わらないだけで表示はされます。

##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>

##CSS
CSSは見た目のみなので省略。

##JavaScript
処理の順序的には、

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

となっています。

$(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++;
  });
});

##デモ
デモ

##転載元の記事
jQueryでコンテンツをランダムに入れ替える