More than 3 years have passed since last update.

jQueryのセレクタで同じIDのDOM要素を全取りする

Posted at 2021-02-11

同じページに同じIDの複数のDOM要素がありそれらを全て取得したいとき、jQueryで#ID名で指定する方法では最初の１つしか取得できません。例えば以下の例では最初のSample1だけ取得できます。

page.html

<span id="sample">Sample1</span>
<span id="sample">Sample2</span>
<span id="sample">Sample3</span>

jscode.js

var elems = $("#sample");
for(var elem of elems) {
  console.log($(elem).text());
}

結果

Sample1

そんなときは、[id=ID名]のセレクタを使うと全部取れるようです。

jscode.js

var elems = $("[id=sample]");
for(var elem of elems) {
  console.log($(elem).text());
}

結果

Sample1
Sample2
Sample3

IDが2種類以上の場合は少し異なり #ID1, #ID2,... のセレクタで重複するものも全て取得できるようです。

page.html

<span id="sample_a">Sample1</span>
<span id="sample_a">Sample2</span>
<span id="sample_b">Sample3</span>
<span id="sample_b">Sample4</span>

jscode.js

var elems = $("#sample_a, #sample_b");
for(var elem of elems) {
  console.log($(elem).text());
}

結果

Sample1
Sample2
Sample3
Sample4

これを応用すると、IDが1種類の場合もページ中には存在しないダミーのID名と組み合わせると取得できるようです。

page.html

<span id="sample">Sample1</span>
<span id="sample">Sample2</span>
<span id="sample">Sample3</span>

jscode.js

var elems = $("#sample,#dummy");
for(var elem of elems) {
  console.log($(elem).text());
}

結果

Sample1
Sample2
Sample3

おわりに

そもそも同じIDのDOM要素を作らないように設計するべきで、こういう場合はクラス名を使うのが正しいやり方かとは思いますが、役立つシーンもあるかと思います。たまたまこう動いているだけという可能性もありますので注意しながらご利用ください。

[id=ID名]のセレクタについてはこちらを参考にさせていただきました。