【jQuery】要素に連番でクラスなどを追加する方法

jQueryを使って要素に連番でクラス（id他も可能）追加する方法を紹介します。

実装イメージ
実際のコード

実装イメージ

See the Pen 連番でクラス追加 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実際のコード

<div class="dammy__area">
	<p>ダミー1</p>
	<p>ダミー2</p>
	<p>ダミー3</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

このようなコードに対して、pタグに連番を追加していきます。

※body最下部でのjqueryのcdn追加もお忘れなく、、

$(function(){
  $('.dammy__area p').each(function(i){
    $(this).attr('class','num' + (i+1));
  });
});

こちらのコードで連番でクラス追加可能です。’class’をidや他属性を指定することも可能です。

また’num’としている部分はサイトに合わせ、適宜変更してください。

いろいろCSSでいじりたいときにおすすめです。