要素をランダムに並び替える

要素をランダムに並び替える

ページ読み込み時に要素をランダムに並び替えるサンプルを作成しました。




要素をランダムに並び替える
■html
<div id="sample">
<div><img src="images/cat1.jpg"></div>
<div><img src="images/dog1.jpg"></div>
<div><img src="images/dog2.jpg"></div>
<div><img src="images/bird1.jpg"></div>
<div><img src="images/bird2.jpg"></div>
<div><img src="images/dog3.jpg"></div>
<div><img src="images/cat2.jpg"></div>
<div><img src="images/bird3.jpg"></div>
<div><img src="images/cat3.jpg"></div>
<div><img src="images/cat4.jpg"></div>
<div><img src="images/bird4.jpg"></div>
<div><img src="images/dog4.jpg"></div>
</div>
■javascript
$(function() {
	var arr = [];
	$("#sample div").each(function() {
		arr.push($(this).html());
	});
	arr.sort(function() {
		return Math.random() - Math.random();
	});
	$("#sample").empty();
	for(i=0; i < arr.length; i++) {
		$("#sample").append('<div>' + arr[i] + '</div>');
	}
});
解説

まず初めに要素を格納する配列「arr」を用意します。

	var arr = [];

次にID名「sample」内でUL要素が見つかる度に、push()でUL要素の中身を配列「arr」に追加します。

	$("#sample div").each(function() {
		arr.push($(this).html());
	});

配列「arr」をsort()とMath.random()を使ってランダムに並び替えます

	arr.sort(function() {
		return Math.random() - Math.random();
	});

残すはランダムに並び替えた配列の出力のみですが、その前にempty()を使って一度ID名「sample」内を空にします。

	$("#sample").empty();

最後にfor文を使って配列の数だけ(=arr.length)ループさせます
配列の順番通りにID名「sample」内にappend()で一つ一つ追加していきます。

	for(i=0; i < arr.length; i++) {
		$("#sample").append('<div>' + arr[i] + '</div>');
	}



“要素をランダムに並び替える” への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です