id属性

ID属性の重複問題

HTMLの文法上、id属性は重複してはいけないというルールがある。

ただし、コンソール上にエラー表記がされる訳でもなく、ペナルティがある訳でもないのでこうしたルール違反は度々見られる。

では何が問題か

JavaScriptを使う際には注意が必要。

DOM要素を取得する document.getElementById は重複したID属性が存在する場合、先に見つけた方のノードを取得し、以降を無視する。

このため、要素の指定がうまくいかず、予想外の挙動となってしまう。

対策

jQueryが使える場合対策が取れる。

jQueryの場合id属性が重複して存在している場合、そのid属性全てのノードを取得することができる。

var el = $('[id=hoge]');

el.each(function() {
  console.log($(this));
});

eachで取得したjQueryオブジェクトをループ処理にかけて $(this) でとるというもの。

クラス名やinnertテキストでも何かid属性以外で個別に指定できる条件を見つけ出して判定すれば、期待通りの動作ができる。