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

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

aaa

jQuery Sequential List
demo

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

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

HTML

JavaScript

CSS

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

ナンバリングした新しい要素(span)を追加

ナンバリングした新しい要素(span)を追加

sponsors

top of page

©2018 coliss