今回は同一の複数クラスをつけたDIVに、それぞれidを付与して連番をつけたときに
結構苦戦したので、それを備忘録として残しておきます。
これ、プログラマーさんやシステマーさんなら鼻で笑ってしまうほどさくっと終わるんだんと
思うんですが、いちデザイナーはこんなものでも苦戦するんです…とほほ。
指定した要素にIDを付与する
では早速、まずjQueryで指定した要素にidを付与します。
今回の場合、私はすでに要素にクラス名を指定していました。
$(function () {
$('div.sample').attr('id', 'box');
});
上記のjQueryだと出力結果はこうなります。
<div class="sample" id="box"> ここに中身 </div> <div class="sample" id="box"> ここに中身 </div> <div class="sample" id="box"> ここに中身 </div> <div class="sample" id="box"> ここに中身 </div> <div class="sample" id="box"> ここに中身 </div>
で、私はこのboxに連番を振りたかった！
指定した要素にIDを付与して連番をつける
$(function(){
$('div.sample').each(function(i){
$(this).attr('id','box' + (i+1));
});
});
上記JSで連番が設置可能です。
これで以下のような出力結果になります。
<div class="sample" id="box1"> ここに中身 </div> <div class="sample" id="box2"> ここに中身 </div> <div class="sample" id="box3"> ここに中身 </div> <div class="sample" id="box4"> ここに中身 </div> <div class="sample" id="box5"> ここに中身 </div>
ここまでは、いろんなブログでさくっと紹介されているため
個人的には全然問題なかった…
かいてる意味も理解できる！
ただ、わたしはここからが問題で、一桁のときは01からはじまって
2桁になったら、通常通りの表記をしたかった！
これがなかなかうまく実装できずのたうち回りました…
01,02,03,・・・10,11,12・・・50
とこんな感じ。
指定した要素にIDを付与して01からはじまる数字で連番をつける
で、みつけた方法がこれ！
$('div.sample').each(function(index, element) {
$(element).attr('id','box' + (index + 1).toString().padStart(2, '0'));
});
上記JSで、望んでいた出力結果になりました~涙涙！
<div class="sample" id="box01"> ここに中身 </div> <div class="sample" id="box02"> ここに中身 </div> <div class="sample" id="box03"> ここに中身 </div> ・ ・ ・ <div class="sample" id="box10"> ここに中身 </div> <div class="sample" id="box11"> ここに中身 </div>
同じように困っている皆さんの参考になれば幸いです！
ぜひ試してみくださいね！