【何気に便利！】連続する複数の要素に対し連番でclassを付与するjs

Web2016年12月20日

先日、自由にソースコードをいじれないページに対し、連続して繰り返している要素の一部に対してだけcssをあてる必要性に迫られるケースがありました。
そんな時はjsを使って、連番のclass名を付与してしまうととても便利です。本記事では連続する要素に対して連番でclassを付与するjsをご紹介したいと思います。

サンプルコード

js

(function () {

$(function() {
    var i = 1;
    $("div.hoge").each(function(){
        $(this).addClass('js-' + (i++));
    });
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

html

<div class="hoge">ほげ1</div>
<div class="hoge">ほげ2</div>
<div class="hoge">ほげ3</div>
<div class="hoge">ほげ4</div>
<div class="hoge">ほげ5</div>

上記のようなhtmlに対しこのjsを実行すると、以下のように連番のclass名が付与されます。

<div class="hoge js-1">ほげ1</div>
<div class="hoge js-2">ほげ2</div>
<div class="hoge js-3">ほげ3</div>
<div class="hoge js-4">ほげ4</div>
<div class="hoge js-5">ほげ5</div>

解説

jQueryの.eachを使って繰り返しの処理を行います。この際、var i = 1;で変数を宣言しておき、addClassで命名するclass名を'js-' + (i++)とすることで、div.hogeの数だけ「js-1」「js-2」「js-3」...と手前の要素から順番にclass名を付与することができます。

まとめ

自由のソースコードがいじれない場合や、大量に連続する要素で何らかの処理をjsで行ったほうが便利と思われるケースにおいて活用できると思います。
html自体はとてもスッキリしますし、使い方次第でとても便利なのでどうぞお役立ていいただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。