【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も記述が少ないのでお好みで使用してください。
Comments