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

サイト構築 -JavaScript

Post on:2009年2月10日

sponsorsr

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

jQuery Sequential List
demo

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

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<ol id="step">
	<li><h3>PhotoShop Part</h3></li>
	<li><h3>jQuery</h3></li>
</ol>
</textarea>

<li><h3>PhotoShop Part</h3></li>

<li><h3>jQuery</h3></li>

</ol>

</textarea>

JavaScript

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

$(document).ready(function(){

$("#step li").each(function (i) {

i = i+1;

$(this).addClass("item" i);

});

</script>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
#step .item1{
	background: url(step1.png) no-repeat;
}
#step .item2{
	background: url(step2.png) no-repeat;
}
</textarea>