jQueryで要素IDのコロンを処理する

jQueryを使用して、JSコードのIDが「test：abc」のdiv要素にアクセスできません。

<div id="test:abc">

$('#test:abc') 

コロンなしで問題なく動作しています。トリニダードサブフォームでは自動生成されるため、ID生成を制御できません。サブフォームIDが:その内部のすべての要素されるためです。

2つのバックスラッシュを使用してコロンをエスケープする必要があります。

$('#test\\:abc')

要するに

$(document.getElementById("test:abc")) あなたが使うべきものです。

説明：スピードゲイン（下を参照）とは別に、扱いが簡単です。

例：関数があるとしましょう

   function doStuff(id){

       var jEle = $("#" + id); //is not safe, since id might be "foo:bar:baz" and thus fail. 
       //You would first have to look for ":" in the id string, then replace it

       var jEle = $(document.getElementById(id)); //forget about the fact 
      //that the id string might contain ':', this always works
    }

    //just to give an idea that the ID might be coming from somewhere unkown
    var retrievedId = $("foo").attr("data-target-id");
    doStuff(retrievedId); 

速度/タイミング

IDの選択方法の速度をテストしてコロンと比較するこのjsbinを見てください

結果を取得するには、Firebugコンソールを開く必要があります。

私はそれをfirefox 10とjquery 1.7.2でテストしました

基本的に、idにコロンを使用してdivを1万回選択しました-異なる方法でそれを達成しました 次に、コロンを含まないID選択と結果を比較しましたが、結果は驚くべきものです。

左時間（ミリ秒）右セレクターメソッド

299 $("#annoying\\:colon")

302 $("[id='annoying:colon']"

20 $(document.getElementById("annoying:colon"))


71 $("#nocolon")

294 $("[id='nocolon']")

特に

  71 $("#nocolon") and
299 $("#annoying\\:colon")

ちょっと驚きました

jQueryがそれをセレクターとして解釈しようとしているため、これは明らかにコロンで作動しています。id属性セレクターを使用してみてください。

 $('[id="test:abc"]')

私は単にを使用してdocument.getElementById、結果をjQuery()関数に渡します。

var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc') 

2つのバックスラッシュを使用する \\

デモ

ここに書かれているように

メタ文字（！ "＃$％＆ '（）* +、。/ :; <=>？@ [] ^` {|}〜など）をリテラルの一部として使用する場合名前の場合、2つの円記号（\）で文字をエスケープする必要があります。たとえば、id = "foo.bar"の要素がある場合、セレクター$（ "＃foo \ .bar"）を使用できます。W3CCSS仕様完全なが含まれています

参照

Toskanの回答を参考にして、コードを更新してもう少し読みやすくし、ページに出力しました。

これがjbinリンクです：http ://jsbin.com/ujajuf/14/edit 。



また、より多くの反復で実行しました

Iterations:1000000

Results:    
12794   $("#annyoing\\:colon")
12954   $("[id='annyoing:colon']"
754 $(document.getElementById("annyoing:colon"))
3294    $("#nocolon")
13516   $("[id='nocolon']")

さらに：

Iterations:10000000

Results:    
137987  $("#annyoing\\:colon")
140807  $("[id='annyoing:colon']"
7760    $(document.getElementById("annyoing:colon"))
32345   $("#nocolon")
146962  $("[id='nocolon']")

使ってみる $('#test\\:abc')

この構文$('[id="test:abc"]') は私にとってうまくいきました。私はNetbeans 6.5.1＆を使用してidいますが、を含むを持つコンポーネントが生成されます: (colon)。\\＆を試しました\3Aが、どれもうまくいきませんでした。

を使用し$('[id=id:with:colon]')ます。