jQueryを使って自動でナンバリング

今回は、表やリストなどの番号をjQueryを使って自動で追加する方法をご紹介します

jQueryのコードを書く！

コードはシンプルです

$(function(){
  $("番号を付けたいタグやクラス").each(function (i) {
    i = i+1;
    $(this).text(i);
    });
});

HTMLの例

例としてtableのリストに番号をつけてみました！
classがついている箇所に番号が追加されていきます。ついてない箇所は、空白で飛ばされます。

 <table>
    　<tr>
        <th>番号</th>
        <th>場所</th>
        <th>時間</th>
    　</tr>
    　<tr>
        <td class="no"></td>
        <td>渋谷</td>
        <td>13:00</td>
    　</tr>
    　<tr>
        <td></td>
        <td>原宿</td>
        <td></td>
    　</tr>
    　<tr>
        <td class="no"></td>
        <td>表参道</td>
        <td>17:00</td>
    　</tr>
</table>

こうなります！！

jQueryの例その２

今度は、逆にクラスがついていない部分に番号をつけていきます！

$(function(){
  $(".numbering tr td:first-child").not('.nonumber').each(function (i){
    i = i+1;
    $(this).text(i);
    });
});

最初のtdかつ.nonumberがないtdを繰り返し処理します！

HTMLのコードその２

<table class="numbering">
    　<tr>
        <th>番号</th>
        <th>場所</th>
        <th>時間</th>
    　</tr>
    　<tr>
        <td></td>
        <td>渋谷</td>
        <td>13:00</td>
    　</tr>
    　<tr>
        <td class="nonumber"></td>
        <td>原宿</td>
        <td></td>
    　</tr>
    　<tr>
        <td></td>
        <td>表参道</td>
        <td>17:00</td>
    　</tr>
</table>

見え方としては同じものですが、cssなどでいじったりするときなど
使い分けてみてください！

順番変更や、間の削除ってなったとき自動だと数字を書き換えなくていいので楽ですよね！
是非活用してみてください！

参考サイト

https://beanb.wordpress.com/2014/05/31/jqueryで自動ナンバリング/