1. TOPページに戻る
  2. Javascript
  3. jQueryでコンテンツをランダムに入れ替える

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

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

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>

CSSは動作に関係ないので省略。

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

サンプルページは以下から。開いたらリロードをしてみてください。

【更新】2019/11/04 サンプルが未動作なのを修正・掲載ソースコードのインデントの修正。