jQueryで作成した要素をランダムに並び替えて表示する方法


jQueryで作成した複数の要素をランダムに並び替えて表示したいという状況に遭遇したのでいろいろ工夫してやってみました。

具体的にいうと、クイズコンテンツを作ろうとしたのですが、100問あるクイズはランダムに表示するようにしたいと思いました。最初にとりあえず100問分の要素を作成したうえでそれをランダムに並び替えて・・・。と思ったのですが、それだとかなり効率が悪そうな気がしました(そもそも、うまい実装方法が思いつかない)。

ただ、よくよく考えたら、まず最初に作ったのを一つおき、2つ目はその前後2つのうちどちらかランダムで挿入、3つ目は最初か1つ目の要素と2つ目の要素の間か最後の3つのうちどれかにランダムで挿入、n個目は挿入できるn個の場所のどれかにランダムで挿入・・・というようにしたらランダムで並び替えたことになるんじゃないかと思って実装してみました。
以下、実装サンプルです。久々にjsfiddleを使ってみました。

ただたんに、0~100の数値が書かれたdiv要素をランダムに並び替えて表示するプログラムです。多分、これで問題ないはずです。何度か試しましたが、偏ってなさそうでした。

コメントを残す

メールアドレスが公開されることはありません。