JS(jQuery)でidを付与して、0からはじまる連番をつけてみた

今回は同一の複数クラスをつけた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>

同じように困っている皆さんの参考になれば幸いです!
ぜひ試してみくださいね!