jQueryで要素をシャッフル。

2012.06.26 / Notes

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

function shuffleContent(container) {
	var content = container.find("> *");
	var total = content.size();
	content.each(function() {
		content.eq(Math.floor(Math.random()*total)).prependTo(container);
	});
}

function shuffleContent(container) {

var content = container.find("> *");

var total = content.size();

content.each(function() {

content.eq(Math.floor(Math.random()*total)).prependTo(container);

});

}

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

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

$(function() {

shuffleContent($("ul#test"));

});

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

<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>

</ul>