js、jQuery:最初のセレクタしか動作しない。同じセレクタが複数あるときは、ループをかけて処理をする。

同じセレクタが複数あったとする。

Chromブラウザのコンソールには同じIDが複数あると、メッセージが出る。

jsやphpでDOMをループで出力するときに、IDを同じもので設定しているとよくこうなる。

下記のように同じクラスに対して、なにかjsで操作をするとき

<div class=”box”>

  <input type=”button” class = “output” value=”a”>

  <input type=”button” class = “output” value=”b”>

  <input type=”button” class = “output” value=”c”>

</div>

例えば、ボタンの値を取得したい。

jqueryでは、

$(“.output”).val();

のように書く。

しかし、これで出力しても、一番上のinputにしか操作しない。

つまり最初に取得したdomにしか処理をしないわけである。

 

なら、複数同じ処理をしたい場合どうするか?

セレクタを指定

let btn = $(‘.output’);

ループする

let array = new Array();

btn.each(function(index,element){

  array[index] = $(this).val();

});

 

のようにすると、配列にclass=”output”のvalueが入る。

jqueryの場合、eachでjqueryオブジェクトをループして、項目番号とセレクタを個別に取得できる。

セレクタは$(this)でも$(element)でも取れる。

jsの場合、取得方法によってループできるかが変わってくる。

htmlコレクションなのか、DOMオブジェクトなのか、なんなのかで、使えるものが違うので気をつけたい。