jQuery:同名のidを持つ複数要素を選択する

jQuery:同名のidを持つ複数要素を選択する

author : koki

publish date :

たまにありますよね、他社が作ったJSの改修案件。そんな案件でたまにあるのですが、HTMLに同じidがいくつもあったり、謎な記述があったり、ドックタイプが書かれていない時もありました。そういう時に限ってHTMLの修正は不可。

ということで今回はHTMLが変更できない中、同じidが複数書かれている時に使えるjQueryコードの紹介です。

念のため書かせてもらいますが、本来1つのidはページ内で1回のみ使えるものです。それなのに何回も使われているのは・・・
さて、それでは本題に戻ります。

正しく動かないjQueryコード

classと同じ感覚で書いた場合だと以下のように書きますが、この書き方だと最初の1つ目しか.show()がききません。

$('#sameId').show();

じゃあ、.each()なら行けるんじゃね、と思っても、

$('#sameId').each(function(){
	$(this).show();
});

この書き方でも最初の1つ目しか.show()がききません。

正しく動くjQueryコード

同じ名前のid全てに処理をさせるには属性フィルタで書きます。

$('[id=sameId]').show();

タグとかが統一されている場合だと、要素名も書いた方がより限定的になりベターです。

$('div[id=sameId]').show();

これで同名のidを一気に操作できます。

ではでは、よき開発ライフを?。