jQuery(Javascript)で自動で連番を振る方法

Javascript/jQuery

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

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

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

jQueryを使用して自動で連番

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

<script>

$(function() {
  var i = 1;
  $('.box h3').each(function(){
    $(this).prepend('<span class="num">' + i + '</span>');
    i++;
  });
});
  
</script>


出力されるHTML

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

<div class="box">

    <h3><span class="num">1</span>タイトル1</h3>
    <p>テキストテキスト</p>
    
    
    <h3><span class="num">2</span>タイトル2</h3>
    <p>テキストテキスト</p>
    
    
    <h3><span class="num">3</span>タイトル3</h3>
    <p>テキストテキスト</p>

</div>

 

CSSで調整できる

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

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

<script>

$(function() {
  var i = 1;
  $('.box h3').each(function(){
    $(this).prepend('<span class="num">' + i + '.' + '</span>');
    i++;
  });
});
  
</script>

コメント

タイトルとURLをコピーしました