【jQuery】重複しない複数の要素をランダムに表示する方法。(jQuery編)

Ads by Google

例えば「1」〜「10」までの要素の中から3つだけランダムに抽出して表示させたい場合があります。
この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか?

今日は、そんなときに重宝する便利な jQuery のテクニックを紹介します。

リストはもちろん、画像やブロック要素など、ほぼどんな形式にも対応できるので様々な場面で活用できると思います。

まずは jquery.randomdisplay.js と名付けた、以下の内容の javascript ファイルを用意します。

jQuery(function($) {
$.fn.extend({
	randomdisplay : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
			$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});
$(function(){
	$("[randomdisplay]").each(function() {
	$(this).randomdisplay($(this).attr("randomdisplay"));
	});
});
});

続いて html 側の表記の例。


<ul randomdisplay="3">
<li><a href="#1">要素1</a></li>
<li><a href="#2">要素2</a></li>
<li><a href="#3">要素3</a></li>
<li><a href="#4">要素4</a></li>
<li><a href="#5">要素5</a></li>
</ul>

ランダム表示したい要素(この場合は「<li>タグ」)を並べて、その親の要素(この場合は「<ul>タグ」)に新しい属性 randomdisplay を追加し、表示したい数を指定します。

上記の例では、「要素1」〜「要素5」の中からランダムに3つ表示させることになります。

また、親要素と内包する子要素の関係は、div要素やp要素など、様々なタグに対応できます。
例えば親要素に div タグを、ランダム表示させたい子要素に p タグを使用する場合は以下のようになります。


<div randomdisplay="2">
<p><a href="#1">要素1</a></p>
<p><a href="#2">要素2</a></p>
<p><a href="#3">要素3</a></p>
<p><a href="#3">要素4</a></p>
<p><a href="#3">要素5</a></p>
</div>

今回の jQuery テクニックは、murak.net様のスクリプトを参考にさせていただきました。

重複しない複数の要素をランダムに表示する方法。(jQuery編):
サンプル

明日は、同じく『重複しない複数の要素をランダムに表示する方法』を PHP で実装するテクニックを紹介します。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です