使用jQuery处理元素ID中的冒号

我们无法使用jQuery在JS代码中访问ID为“ test：abc”的div元素。

<div id="test:abc">

$('#test:abc') 

没有冒号就可以正常工作。我们无法控制ID的生成，因为它会以特立尼达子表单的形式自动生成，因为它会将子表单ID附加:到其中的每个元素。

您需要使用两个反斜杠来使冒号转义：

$('#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); 

速度/时间

看看这个 jsbin，它测试并比较ID和冒号选择方法的速度

您需要打开Firebug控制台以获取结果。

我用Firefox 10和jQuery 1.7.2进行了测试

基本上，我在id中用冒号选择了div的10,000次-使用不同的方法来实现它。然后，我将结果与没有冒号的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') 

用两个反斜杠 \\

演示

如写在这里

如果您希望使用任何元字符（例如！“＃$％＆'（）* +，。/ :; <=>？@ [] ^`{|}〜）作为a的原义部分，名称，必须用两个反斜杠转义字符：\。例如，如果您的元素具有id =“ foo.bar”，则可以使用选择器$（“＃foo \ .bar”）。W3C CSS规范包含完整的

参考

参考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]')。