たまにありますよね、他社が作ったJSの改修案件。そんな案件でたまにあるのですが、HTMLに同じidがいくつもあったり、謎な記述があったり、ドックタイプが書かれていない時もありました。そういう時に限ってHTMLの修正は不可。
ということで今回はHTMLが変更できない中、同じidが複数書かれている時に使えるjQueryコードの紹介です。
念のため書かせてもらいますが、本来1つのidはページ内で1回のみ使えるものです。それなのに何回も使われているのは・・・
さて、それでは本題に戻ります。
正しく動かないjQueryコード
classと同じ感覚で書いた場合だと以下のように書きますが、この書き方だと最初の1つ目しか.show()がききません。
1 | $( '#sameId' ).show(); |
じゃあ、.each()なら行けるんじゃね、と思っても、
1 2 3 | $( '#sameId' ).each( function (){ $( this ).show(); }); |
この書き方でも最初の1つ目しか.show()がききません。
正しく動くjQueryコード
同じ名前のid全てに処理をさせるには属性フィルタで書きます。
1 | $( '[id=sameId]' ).show(); |
タグとかが統一されている場合だと、要素名も書いた方がより限定的になりベターです。
1 | $( 'div[id=sameId]' ).show(); |
これで同名のidを一気に操作できます。
ではでは、よき開発ライフを~。