[JS]リスト要素に自動でナンバリングを追加するスクリプト
Post on:2009年2月10日
sponsors
リスト要素のclassや新しい要素に自動でナンバリングして追加するスクリプトをWeb Designer Wallから紹介します。
上記キャプチャのデモでは、「class="item1", class="item2"、、、」をスクリプトで自動追加し、Step1, Step2...の背景画像を表示させています。
元のHTMLにはclassを記述せず、下記のようなコードで実装されています。
※キャプチャ箇所（Step1, Step2）のみ抜粋。
HTML
|
1 2 3 4 5 6 |
<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> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
CSS
|
1 2 3 4 5 6 7 8 |
<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> |
サイトでは、他にもli内にナンバリングした新しい要素（span）を追加するチュートリアルが紹介されています。
ナンバリングした新しい要素（span）を追加
sponsors
