jQuery/CSS 連番を自動的に付与する方法

jQuery CSS CSS

HTMLで言うところの<li>のような連番を、CSSやjQueryで自動付与する方法を知ったのでメモ。

jQueryで連番を付与する方法

.each()メソッドを利用する。.each()メソッドは指定したセレクター1つ1つに処理を順番に行う動きをする。
いわゆるループと呼ばれるあれ。

$(function() {
  var i = 1;
    $('セレクタ').each(function(){
      ~連番の付け方~
    i++;
  });
});

var i = 1;部分がカウンタ初期値の設定。
ページロード時に$(‘セレクタ’)を見つけに行き、1つ目を見つけた時点で~連番の付け方~部分の処理を行う。
処理が終わったらi++でカウンタの数値を1プラスする。
その後、また$(‘セレクタ’)を見つけに行き同様の処理を行う。すべての$(‘セレクタ’)に対して処理を行う。
この処理がページロードした瞬間に即座に行われている。

以下2つは~連番の付け方~部分の記述方法の例。

連番のテキストを付与

$(function() {
  var pNum = 1;
  $('p').each(function(){
    $(this).prepend('<span>' + pNum + '.' + '</span>');
    pNum++;
  });
});

.prepend()は()内で指定した内容をセレクタで指定した要素の先頭に挿入するjQueryメソッド。

デモページ

連番のクラス名を付与

$(function() {
  var classNum = 1;
  $('a').each(function(){
    $(this).addClass('link' + classNum);
    classNum++;
  });
});

.addClass()は()内で指定した文字列をセレクタで指定した要素のクラス名として付与するjQueryメソッド。

デモページ

CSSで連番を付与する方法

counter-incrementプロパティを利用する。
下記は<dt>要素に設定した例。

dt {
  counter-increment: dt;
}
  dt:before {
    content: counter(dt)".";
  }

counter-incrementの使い方をまとめると以下。

  • カウントしたい要素に対してcounter-increment: カウンタ名(任意の名前);を設定。
  • その要素の:before擬似要素もしくは:after擬似要素にcontentプロパティを設定。
  • contentプロパティの値をcounter(カウンタ名)と指定。
    例では”.”で連番の後ろにドットを付与している。

デモページ

参考サイト

each(callback) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/core/each/callback/
prepend(content) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/manipulation/prepend/content/
liに連番のidを振る方法 │ これからゆっくり考L +α
http://sakaki0214.com/2009/10/19021644.html
addClass(class) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/attributes/addClass/class/
counter-increment-スタイルシートリファレンス
http://www.htmq.com/style/counter-increment.shtml

コメント

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