一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。
Javascript
[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"));
});
});
});
[/javascript]
外部jsとして、保存し、ランダム表示させたい要素を含んだファイルに外部jsを紐付けます。
ここではrandomdisplay.jsとして保存します。
HTML
[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>
[/html]
ランダム表示をしたい要素の親要素に対して「randomdisplay=”nn”」という表記を追加します。nnはランダム表示させたい要素数です。例の場合ならば、5個のリスト要素のうち、3個をランダムで表示するという設定になります。
参考サイト：
jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例
http://murak.net/post/javascript/300