Eight

【JS】要素をランダムに並び替えるのを福岡一わかりやすく解説します

ページを読み込んだ時に要素をランダムに並び替えるJavascriptの記述を紹介します。

HTML

<div class="random">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

javascript

その1

sort関数を使ってランダムに並び替えます。

$(function(){
	var rand_obj = $(".random");
	var obj_ary  = [];
	rand_obj.find("> *").each(function() {
		obj_ary.push($(this));
	});
	obj_ary.sort(function() {
		return Math.random() - Math.random();
	});
	rand_obj.empty();
	obj_ary.forEach(function(v) {
		rand_obj.append(v);
	});
});

その2

範囲内のランダムな数字で要素数分だけ試行して並び替えます。
$(function(){
	var rand_obj         = $(".random");
	var rand_child_obj   = $(".random").find("> *");
	var rand_child_total = rand_child_obj.size();
	rand_child_obj.each(function() {
		var num = Math.floor(Math.random()*rand_child_total);
		rand_child_obj.eq(num).prependTo(rand_obj);
	});
});

まとめ

javascriptに関しては、その1のほうが確実に並び替えしてくれますのでお勧めですが、その2も記述が少ないのでお好みで使用してください。

参考