jQueryで要素の順番をシャッフルするスクリプトのメモです。

1
2
3
4
5
6
7
function shuffleContent(container) {
	var content = container.find("> *");
	var total = content.size();
	content.each(function() {
		content.eq(Math.floor(Math.random()*total)).prependTo(container);
	});
}

使い方は、シャッフルを行いたい要素の親要素を引数に指定します。

1
2
3
$(function() {
	shuffleContent($("ul#test"));
});

結果は次のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="test">
	<li>その8</li>
	<li>その7</li>
	<li>その2</li>
	<li>その4</li>
	<li>その0</li>
	<li>その1</li>
	<li>その5</li>
	<li>その3</li>
	<li>その9</li>
	<li>その6</li>
</ul>