jQuery:要素をランダムに表示する

harada 2,832views 更新:2014年11月26日

jQueryを利用することで簡単なコードですぐにランダム表示ができるようです。

利用方法

jQueryを利用していますので、もちろんあらかじめjQueryを読み込んでおきます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

JavaScript

<script language="JavaScript" type="text/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"));
    });
});

});
</script>

HTML

randomdisplay=""というパラメータを付けて、ランダムさせたい数を指定します。

<div class="row-fluid" randomdisplay="100">
<div class="span3">ランダム表示させたいブロックA</div>
<div class="span3">ランダム表示させたいブロックB</div>
<div class="span3">ランダム表示させたいブロックC</div>
<div class="span3">ランダム表示させたいブロックD</div>
<div class="span3">ランダム表示させたいブロックE</div>
</div>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません