同じセレクタが複数あったとする。
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オブジェクトなのか、なんなのかで、使えるものが違うので気をつけたい。