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

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