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

Javascript

ページのコンテンツをランダムに表示する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++;
	});

});

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