リストに自動で連番クラス・テキストを挿入するjQueryテクニック

jQuery Sequential List （別窓）

リストに自動で連番クラス・テキストを挿入するjQueryテクニックの紹介です。
具体的にどのようなことができるかというと…

<ol id="step">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

このようなコードを以下のように変換してくれます。

<ol id="step">
<li class="item1">...</li>
<li class="item2">...</li>
<li class="item3">...</li>
</ol>

これはstepというidを持つol内のli要素にitem+連番という名前のクラスを付与しています。
ちなみにこれを実現するJavaScriptコードは以下のような感じです。

<script type="text/javascript">
$(document).ready(function(){
  $("#step li").each(function (i) {
    i = i+1;
    $(this).addClass("item" i);
   });
});
</script>

尚、jQueryを利用しているので、予めjQueryを読み込んでいる必要があります。
これ以外にも、特定のidを持つli要素の中に固定クラスを持つspan+連番テキストを挿入する方法も紹介されています。
項目が多いとき、項目の追加があったときに手作業でクラスを追加する必要がなくなる嬉しいテクニックですね。