[jQuery]IDにCSS表記法で使用されている文字がある要素の選び方

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')

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル