KH-WEBLOG TOP > WEBメモ > JavaScript > 複数の要素をランダムに表示する方法:jQuery

複数の要素をランダムに表示する方法:jQuery

jQueryで複数の要素をランダムに表示する方法をご紹介します。

<ul id="randomList">
        <li>りんご</li>
        <li>バナナ</li>
        <li>ぶどう</li>
        <li>みかん</li>
        <li>いちご</li>
        <li>さくらんぼ</li>
        <li>キウイ</li>
        <li>パイナップル</li>
</ul>

のようなHTMLがあった場合、この中から3件をランダムに表示したい場合

コーディング・WordPress化作業を代行します

jQueryのコード

$(document).ready(function(){
            var displayCount = 3; // ← 表示したい件数を変更

            function showRandomItems() {
                var $items = $("#randomList li");
                $items.hide(); // すべて非表示
                
                // ランダムに指定数の要素を取得
                var randomItems = $items.sort(function() { return Math.random() - 0.5; }).slice(0, displayCount);
                
                // 選ばれた要素を表示
                randomItems.fadeIn(500);
            }

            showRandomItems(); // 初回実行
            setInterval(showRandomItems, 2000); // 2秒ごとに更新
        });

で実装可能です。

コードの説明

displayCount = 3;

ここを変更すると表示する件数を変更可能

.sort(function() { return Math.random() - 0.5; })

シャッフルしてランダムに取得

.slice(0, displayCount)

先頭の displayCount 件だけを選択

fadeIn(500);

フェードインしながら表示

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2025/02/10 12:31時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事