li タグの中身をランダムで n 個 表示する

(1) 以下を jQuery でメソッドを作成する。 rview の属性の値の数だけランダムで li を表示する。

<script language="javascript">

//<!--

jQuery(function($) {

$.fn.extend({

rview : 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(){

$("[rview]").each(function() {

$(this).rview($(this).attr("rview"));

});

});

});

//-->

</script>

(2) HTML側：ランダム表示したい UL に上記(1)で定義した属性を加える。（この場合は rview ）

<ul class="mr" rview="1">

<li><a href="#A">リンク先A</a>|<a href="#a">リンク先a</a></li>

<li><a href="#B">リンク先B</a>|<a href="#b">リンク先b</a></li>

<li><a href="#C">リンク先C</a>|<a href="#c">リンク先c</a></li>

<li><a href="#D">リンク先D</a>|<a href="#d">リンク先d</a></li>

</ul>

(3)  ULの内容がページ読み込み直後に一旦全て表示されてしまう場合があるので、ul.mr li {display:none;} しておくと読み込み後に  rview 指定分のみが表示されるようにできる。