例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。
jQueryを使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、（javascriptが使えれば）無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascriptです。
randomdisplay.js のダウンロード
ファイル名は自由に変更できますが、以下のページにソースコードが公開されていますので、randomdisplay.jsなどの名前で保存します。http://webtips-blog.com/2011/02/22/jquery_tips/
randomDisplay.js の設置
<head>内にjQueryファイルと合わせて以下のように設置します。|
1 2 |
<script src="jquery.min.js" type="text/javascript"></script> <script src="randomdisplay.js" type="text/javascript"></script> |
※モジュール提供元のサイトではjquery 1.3.2 で動いていますが、jQueryファイルのバージョンによっては上手く動きません。
記事をランダムで表示させる
ランダム表示をしたい要素の親要素にrandomdisplay=”n”を追記します。以下の例だと<li>でマークアップした5件のリストの中からrandomdisplay=”2″の件数（2件）をランダム表示させることになります。
|
1 2 3 4 5 6 7 |
<ul randomdisplay="2"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> |
randomdisplay=”2″の値を3、4…とすることで、3件、4件…とランダム表示させる件数を変更できます。
以下にサンプルを用意しています。
randomDisplay.js による記事のランダム出力 デモ
参考ページ
http://webtips-blog.com/2011/02/22/jquery_tips/
コメント