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);
フェードインしながら表示
JavaScriptのおすすめ参考書
ポチップ
ポチップ
