[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」｜jQueryプラグイン・ライブラリ

[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」

スポンサード

この記事は Web Tips Blog 様の記事を参考にさせていただきました。

例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。

jQuery を使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、（javascriptが使えれば）無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascript です。

1 randomdisplay.js のダウンロード
2 randomDisplay.js の設置
3 記事をランダムで表示させる

randomdisplay.js のダウンロード

ファイル名は自由に変更できますが、以下のページにソースコードが公開されていますので、randomdisplay.js などの名前で保存します。

「ランダムに要素を選択・表示する」動きはjQueryで解決！

randomDisplay.js の設置

<head>内に、jQuery ファイルと合わせて以下のように設置します。

<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件）をランダム表示させることになります。

<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 による記事のランダム出力デモ

参考ページ
「ランダムに要素を選択・表示する」動きはjQueryで解決！

スポンサード