【jQuery】要素の数をカウントする

2017-11-19

ページ内の要素を何個あるか数えるということは普通のWeb制作では利用することは少ないかもしれません。

CMSなどの動的に生成されるページであると、ある要素に対して個別のIDやクラス名を指定したい場合があるのでそういうときに使用します。

要素の数を取得する方法

jQueryのlengthメソッドを利用して要素の数を取得します。

$(取得したい要素).length;

要素の数を数えるだけであればこれだけです。

利用例（それぞれにクラス名を付与）

個別のクラス名などを指定する場合はfor文を使い、要素の数だけ繰り返し、attrを利用して変更をします。

for (var i = 0; lengthで取得した数 > i; i++) {
  var 変数名 = 'クラス名' + i;
  $('クラス名:eq(' + i + ')').attr('クラス名', 先ほど宣言した変数);
}

変数 i は最初は 0 なのでクラス名が例えば、class=”クラス名0″という風にユニークなクラス名をつけることが出来ます。

ここの肝心なところはeqメソッドを利用し、引数にカウンタで使用しているiを利用しているところです。

上記の二つをまとめるとこのようになります。

$(function () {
  var classLength = $('要素数を知りたいセレクタ').length;
  var newClass;
  for (var i = 0; classLength > i; i++) {
    newClass = '新たに付けたいクラス名' + i;
    $('付けたい要素:eq(' + i + ')').attr('class', newClass);
  }
});

for文の中身を変更することで要素の数だけ様々な処理を行うことが出来ます。

今回使ったメソッド一覧

length;
eq();
attr();