name[label]
というIDを持つ要素のclickイベントがどうしても取りたい!でも取れない!とかいうたいしたことない問題を解決するために、30分ほど費やしてしまったのですが、考えてみたら当たり前のことでした。
もう二度と迷わないように、(主に自分のために)jQuery公式サイトよりHow do I select an element by an ID that has characters used in CSS notation?の翻訳を載せておきます。
jQueryは要素の選択にCSSの文法を用いているため、いくつかの文字はCSSの表記法として解釈されます。たとえば、ID属性であれば、先頭の文字(a-z か A-Z)の後、文字や数字、アンダースコア(W3C Basic HTML Data Typesを参照)に加えて、ピリオドやコロンを使うかもしれません。コロンとピリオドはjQueryセレクタのコンテキストでは問題となります。それはそれぞれ疑似クラスとクラスを示すためです。
jQueryにこれらをCSS表記法としてではなく、文字通りに扱うように伝えるためには、それらの前に2つのバックスラッシュを置くことで”エスケープ”しなければいけません。
// Does not work: $( "#some:id" ) // Works! $( "#some\\:id" ) // Does not work: $( "#some.id" ) // Works! $( "#some\\.id" )
以下の関数はこれらの文字がエスケープされるように面倒を見て、IDの文字列の前に”#”を置きます:
function jq( myid ) { return "#" + myid.replace( /(:|\.|\[|\])/g, "\\$1" ); }
この関数はこのように使うことができます:
$( jq( "some.id" ) )
自分としては、こんな感じにした方が便利かなとか思いますが、完全に好みですね。
var $esc = function(selector, context) { selector = selector.replace( /(:|\.|\[|\])/g, "\\$1" ); if(context) context = context.replace( /(:|\.|\[|\])/g, "\\$1" ); return $(selector, context); } $esc('#some.id')