要素の出現確率を個々に設定するjQuery

コーディング / 2015.12.15

先日、「要素を25%の確率で出現させる」必要があったのですが、「複数の要素から決まった個数をランダムにピックアップする」方法しか見つからず、「複数ある要素それぞれをランダムに出現させる」方法は見つからなかったのでメモしておきます。

デモはこちら。 box1〜box5がそれぞれ25%の確率で出現しているので、何度か更新してみてください。

必要なコードは以下です。（jQueryの読み込み必須）

javascript

$(function(){
$('.randomBox').each(function(){
//'randomBox'というclassがついた要素が対象
	var randomNumber = Math.round( Math.random()*3 );
	//0から数えるので25%の場合は3、50%なら1で乱数を設定
	if (randomNumber == 3) {
		$(this).css('display','block');
		//乱数が3のときのみ'randomBox'を表示
	}
});
});

$(function(){

$('.randomBox').each(function(){

//'randomBox'というclassがついた要素が対象

var randomNumber = Math.round( Math.random()*3 );

//0から数えるので25%の場合は3、50%なら1で乱数を設定

if (randomNumber == 3) {

$(this).css('display','block');

//乱数が3のときのみ'randomBox'を表示

}

});

html

<div class="randomBox">box1</div>
<div class="randomBox">box2</div>
<div class="randomBox">box3</div>
<div class="randomBox">box4</div>
<div class="randomBox">box5</div>