jQueryで自動で番号(連番)を付ける

jQueryで自動で番号(連番)を付ける

セクションごとに番号を振りたい

見出しなどに、番号を振る時があると思います。
(よくあるのが「~~の流れ」)

LISTを使うのもありですが、装飾したい場合など、表示場所を独立した場合などには使えません。
また、手動で数字を振るのは、メンテナンス性が悪いです。(間に項目追加したりとか)

jQueryを使用して自動で連番

そんな時は、jQueryで番号を振るのが便利です。CSSでする方法もありますが、jQueryだと要素で囲んだりとカスタマイズし易いので、おすすめです。対応ブラウザの面でもあまり考えなくて済みます。

出力されるHTML

下記のような出力になります。

 

CSSで調整できる

サンプルのようにclassを付けたり要素で囲んだらCSSでの調整も楽になります。

また、下記のようにドット( . )なども付けられます。

Javascript/jQueryカテゴリの最新記事