セクションごとに番号を振りたい
見出しなどに、番号を振る時があると思います。
（よくあるのが「～～の流れ」）
LISTを使うのもありですが、装飾したい場合など、表示場所を独立した場合などには使えません。
また、手動で数字を振るのは、メンテナンス性が悪いです。（間に項目追加したりとか）
jQueryを使用して自動で連番
そんな時は、jQueryで番号を振るのが便利です。CSSでする方法もありますが、jQueryだと要素で囲んだりとカスタマイズし易いので、おすすめです。対応ブラウザの面でもあまり考えなくて済みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function() { var i = 1; $('.box h3').each(function(){ $(this).prepend('<span class="num">' + i + '</span>'); i++; }); }); </script> |
出力されるHTML
下記のような出力になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="box"> <h3><span class="num">1</span>タイトル１</h3> <p>テキストテキスト</p> <h3><span class="num">2</span>タイトル２</h3> <p>テキストテキスト</p> <h3><span class="num">3</span>タイトル３</h3> <p>テキストテキスト</p> </div> |
CSSで調整できる
サンプルのようにclassを付けたり要素で囲んだらCSSでの調整も楽になります。
また、下記のようにドット( . )なども付けられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function() { var i = 1; $('.box h3').each(function(){ $(this).prepend('<span class="num">' + i + '.' + '</span>'); i++; }); }); </script> |
