TAGjQuery
複数の要素をランダムに表示する方法:jQuery
jQueryで複数の要素をランダムに表示する方法をご紹介します。
<ul id="randomList"> <li>りんご</li> <li>バナナ</li> <li>ぶどう</li> <li>みかん</li> <li>いちご</li> <li>さくらんぼ</li> <li>キウイ</li> <li>パイナップル</li> </ul>
のようなHTMLがあった場合、この中から3件をランダムに表示したい場合
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);
フェードインしながら表示