jQuery を使ってランダムで要素を表示する

jQueryを使って、ランダムでdiv要素を表示させます。

まず、header部分に以下jQueryを読み込みます。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>

1 2	<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script>

表示させるdiv要素を用意します。


<div id="wrapper">
	<p>ランダムで画像表示</p>
	<div id="random">
		<div><img src="images/img01.jpg" alt="花" /></div>
		<div><img src="images/img02.jpg" alt="花" /></div>
		<div><img src="images/img03.jpg" alt="花" /></div>
		<div><img src="images/img04.jpg" alt="花" /></div>
		<div><img src="images/img05.jpg" alt="花" /></div>
		<div><img src="images/img06.jpg" alt="花" /></div>
		<div><img src="images/img07.jpg" alt="花" /></div>
		<div><img src="images/img08.jpg" alt="花" /></div>
		<div><img src="images/img09.jpg" alt="花" /></div>
	</div><!--random-->
</div><!--wrapper-->

<p>ランダムで画像表示</p>

</div>

</div>

実際にdiv要素をランダムで表示させるjQueryは以下のとおりです。


<script type="text/javascript">
$(function() {
	var arr = []; // 要素を格納する配列を用意します。
	
	// randomの中にある要素を、push()で要素の中身を配列に追加します。
	$("#random div").each(function() {
		arr.push($(this).html());
	});
	
	//sort()とMath.random()を使ってランダムに並べ替えます。
	arr.sort(function() {
		return Math.random() - Math.random();
	});
	
	//並べ替えた後は、randomの中身を空にする。
	$("#random").empty();
	
	//arrに入っている配列の数だけをループさせる。
	for(i=0; i < arr.length; i++) {
	
	//append()を使って、randomの中に一つ一つ追加していく。
		$("#random").append('<div>' + arr[i] + '</div>');
	}
});
</script>