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

今日は、そんなときに重宝する便利な 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">要素１</a></li>
<li><a href="#2">要素２</a></li>
<li><a href="#3">要素３</a></li>
<li><a href="#4">要素４</a></li>
<li><a href="#5">要素５</a></li>
</ul>

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

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

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


<div randomdisplay="2">
<p><a href="#1">要素１</a></p>
<p><a href="#2">要素２</a></p>
<p><a href="#3">要素３</a></p>
<p><a href="#3">要素４</a></p>
<p><a href="#3">要素５</a></p>
</div>

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

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

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