要素がランダムに並び替わりません

下記スクリプトでli要素をランダムに並び替えようとしたのですが、
元のリストで上位にある要素が上位に、
下位にある要素が下位に表示される確率が高いです。
（100回再読込しても9が最上位に来たのは2回でした。）
読み込んでいるJQueryはjquery-3.1.0.min.jsです。
よろしくお願いいたします。

<ul id="random">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

<input type="button" value="シャッフル（ページを再読込）"
onclick="location.reload();">
<span class="caution">IEはF5を押してください</span>


<script>
$(function () {
var arr = [];
$("#random li").each(function () {
arr.push($(this).detach());
});
arr.sort(function () {
return Math.random() - Math.random();
});
$("#random").empty();
for (i = 0; i < arr.length; i++) {
$("#random").append(arr[i]);
}
});
</script>

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/06/23 13:19

こんにちは

シャッフルの方法は違いますが、こんなのではいかがでしょうか？

$(function (){
　var li = $("#random li"), arr = [];
　li.each(function(){arr.push([Math.random(), this]);});
　arr.sort();
　arr.forEach(function(v){$("#random").append(v[1]);});
});

この回答へのお礼

fujillin様
10分ほど再読込してみました。
うまく動作しています。
ありがとうございます。

お礼日時：2017/06/23 14:23