jQuery Ajax通信をランダムで表示

質問

Ajax通信で別htmlファイルを読み込みたいと考えています。
それぞれ読み込むファイルは、a.html、b.html、c.html、d.htmlとあります。

読み込む先(index.html)の以下div要素内に、
上記htmlを読み込みたいと考えています。
<div id="01"></div>
<div id="02"></div>
<div id="03"></div>
<div id="04"></div>

本来ならAjax通信で以下のように出来るかと思います。
$(function(){
　$('#01').load('a.html');
　$('#02').load('b.html');
　$('#03').load('c.html');
　$('#04').load('d.html');
});

しかし、div要素内の表示をランダムにしたいのです。
例）id="01"のところに、b.htmlだったり、d.htmlだったりという感じです。
　ロードする度にコンテンツの表示場所が変化するイメージです。

ランダムというところが、どのように対処したらよいのか、手も足も出ません。

どなたか詳しい方、ご教授いただけたら助かります。

何卒、何卒、宜しくお願いいたします。

回答No.1

fujillin · ベストアンサー

a、b、c、dの配列を作っておいて、シャッフルして、順にdivに表示するとか…
逆に、表示の対象をシャッフルしても同様ですけど。

いずれにしろ、どちらかを混ぜればよいのではないでしょうか。

シャッフルの具体的な方法に関しては、検索すればいろいろと見つかるはずです。

お礼

ご回答をありがとうございます。

そうか…配列を作るのか。
そしてそれをシャッフルするんですね。
シャッフルはMath.random()というものを使って、
実装して期待どおりにできました。

助かりました。
本当に本当にありがとうございました。