リスト要素に手動でclassに連番をつけていると項目の増減や表示位置変更があった場合、再指定が必要になる場合がありますのでjQueryを使って自動で連番をつけてみました。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
スクリプトとサンプル
$(function() {
var i = 1;
$('#list li').each(function(){
$(this).attr('class','no' + (i++));
});
});
処理内容
$(function() {
/* 変数i に 1を代入 */
var i = 1;
/* #list li を一つずつ処理 */
$('#list li').each(function(){
/*
#list li に class で no● を設定
●には、i++ で変数iに1を加算したものが入ります
サンプルでは、1から10 です
*/
$(this).attr('class','no' + (i++));
/* ↑は、$(this).addClass('no' + (i++)); でもOK */
});
});
補足
インデックスを使って記述を少し簡略化
eachは、インデックスが利用できるので.each(function(i){…})としています。
$(function() {
$('#list li').each(function(i){
$(this).attr('class','no' + (i+1));
});
});
for文で繰り返し処理をする場合
for文で list.length 分、繰り返し処理を行います。
setAttribute を使って属性を追加します
$(function() {
var list = $('#list li');
for(var i=0; i < list.length; i++){
list[i].setAttribute('class','no' + (i+1));
}
});