つながるnet

配列(クラス)をシャッフルしてランダムに割り当てる

リスト要素にランダムにクラスを割り当てたい場合、たとえば、リスト先頭の背景画像のオーナメントをランダムに変えたい時など。

・あらかじめ用意したいくつかのクラスを配列に格納して、
・配列をシャッフル
・シャッフルしたクラスを順番にリストに割り当てる

という方法です。
一巡するたびにシャッフルしています。

//配列をシャッフル
function shuffle(a){
	var i = a.length;
	while(i){
		var j = Math.floor(Math.random()*i);
		var t = a[--i];
		a[i] = a[j];
		a[j] = t;
	}
	return a;
}

$(document).ready(function() {

	//配列に格納したクラスをランダムに割り当てる
	var tbClass = [ "tb101","tb102","tb103","tb104" ];
	var dlTN = $("#dlTN dt");
	tbClsCnt = tbClass.length;
	shuffle(tbClass);
	itmp = 0;
	dlTN.each(function(i, val) {
		$(this).addClass(tbClass[itmp]);
		if (itmp < tbClsCnt-1) {
			itmp++;
		}else{
			itmp = 0;
			shuffle(tbClass);
		}
	});

});

直接メールしてみる

お名前 (必須)
メールアドレス (必須)
件名
ご相談内容
画像文字をご入力ください
captcha

コメントを残す