GHWEB06.GRASSHOPPER

jQueryでグループ単位に連番クラスをつける

  • Category:Web関連
  • Web関連の備忘録

list2グループ単位で連番のclassを割り当てる必要があり試してみました。例えば、ページネーションを付けて show() hide() で見え消しの指定をすれば 一見システムが入ってるぽく見せたりと出来ると思います。
jQueryは、Google Hosted Libraries の バージョン2.1.1 を使用。★バージョン1.11.1でも動作確認。

スクリプトのサンプル

1グループに10個のliを含める場合。

$(function() {
	var num = $('#list li').length;
	var i = 0;
	while (i < num){
		var group = i * 10;
		var no = group + 10;
		for (var z = group; z < no; z++) {
			$('#list li').eq(z).addClass('no'+(i+1));
			}
			i++;
		}
});

サンプル①


追加で処理の記述が必要ですが冒頭でも書いていたようにページネーションを付けて表示の制御も出来ます。下記サンプルは、リスト項目を分割して表示させたものです。

サンプル②


追加で表(table)を分割して表示をさせました。上記サンプルと同じくページネーションを付けると縦に長い表を見やすくする事が可能です。

サンプル③

処理内容

//liの数を調べて num に代入
var num = $('#list li').length;

//iの初期値を指定
var i = 0;

//while文で条件で繰り返し処理。i++; が無いと無限ループになる
while (i < num){・・・i++;}

//グループに纏める単位を指定
var group = i * 10;

//グループの最後尾を指定
var no = group + 10;

//for文でグループ単位に繰り返し処理
for (var z = group; z < no; z++) {・・・}

//引数で選択したリストの要素にクラスを追加
$('#list li').eq(z).addClass('no'+(i+1));

以上

ご参考になれば幸いです。
RELATED ARTICLE
  • 掲載: