jQueryを使って、ランダムでdiv要素を表示させます。
まず、header部分に以下jQueryを読み込みます。
|
1 2 | <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> |
表示させるdiv要素を用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="wrapper"> <p>ランダムで画像表示</p> <div id="random"> <div><img src="images/img01.jpg" alt="花" /></div> <div><img src="images/img02.jpg" alt="花" /></div> <div><img src="images/img03.jpg" alt="花" /></div> <div><img src="images/img04.jpg" alt="花" /></div> <div><img src="images/img05.jpg" alt="花" /></div> <div><img src="images/img06.jpg" alt="花" /></div> <div><img src="images/img07.jpg" alt="花" /></div> <div><img src="images/img08.jpg" alt="花" /></div> <div><img src="images/img09.jpg" alt="花" /></div> </div><!--random--> </div><!--wrapper--> |
実際にdiv要素をランダムで表示させるjQueryは以下のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> $(function() { var arr = []; // 要素を格納する配列を用意します。 // randomの中にある要素を、push()で要素の中身を配列に追加します。 $("#random div").each(function() { arr.push($(this).html()); }); //sort()とMath.random()を使ってランダムに並べ替えます。 arr.sort(function() { return Math.random() - Math.random(); }); //並べ替えた後は、randomの中身を空にする。 $("#random").empty(); //arrに入っている配列の数だけをループさせる。 for(i=0; i < arr.length; i++) { //append()を使って、randomの中に一つ一つ追加していく。 $("#random").append('<div>' + arr[i] + '</div>'); } }); </script> |
シンプルで、分かりやすいです。
サンプルは⬇コチラです。
