[JS]リスト要素に自動でナンバリングを追加するスクリプト

リスト要素のclassや新しい要素に自動でナンバリングして追加するスクリプトをWeb Designer Wallから紹介します。

jQuery Sequential List
demo

上記キャプチャのデモでは、「class="item1", class="item2"、、、」をスクリプトで自動追加し、Step1, Step2...の背景画像を表示させています。

元のHTMLにはclassを記述せず、下記のようなコードで実装されています。
※キャプチャ箇所（Step1, Step2）のみ抜粋。

HTML

<ol id="step">
<li>
<h3>PhotoShop Part</h3>
</li>
<li>
<h3>jQuery</h3>
</li>
</ol>

JavaScript

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

CSS

#step .item1{
	background: url(step1.png) no-repeat;
}
#step .item2{
	background: url(step2.png) no-repeat;
}

サイトでは、他にもli内にナンバリングした新しい要素（span）を追加するチュートリアルが紹介されています。

ナンバリングした新しい要素（span）を追加