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

jQueryで連番のテキストを付与

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

HTML

<p>ぱらぐらふぱらぐらふぱらぐらふぱらぐらふ</p>
<p>ぱらぐらふぱらぐらふぱらぐらふぱらぐらふ</p>
<p>ぱらぐらふぱらぐらふぱらぐらふぱらぐらふ</p>
<p>ぱらぐらふぱらぐらふぱらぐらふぱらぐらふ</p>

実行結果

ぱらぐらふぱらぐらふぱらぐらふぱらぐらふ

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

HTML

<a>はいぱーりんくはいぱーりんくはいぱーりんく</a>
<a>はいぱーりんくはいぱーりんくはいぱーりんく</a>
<a>はいぱーりんくはいぱーりんくはいぱーりんく</a>
<a>はいぱーりんくはいぱーりんくはいぱーりんく</a>

実行結果(コンソールでclassの付与を確認)

CSS

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

HTML

<dl>
  <dt>ていぎりすと</dt>
  <dd>せつめいせつめいせつめいせつめい</dd>
  <dt>ていぎりすと</dt>
  <dd>せつめいせつめい</dd>
  <dt>ていぎりすと</dt>
  <dd>せつめいせつめいせつめい</dd>
</dl>

実行結果