Question

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

<div id="test:abc">

$('#test:abc')

没有冒号就行了。我们无法控制ID生成，因为它是在Trinidad子表单中自动生成的，因为它将带有:的子表单ID附加到其中的每个元素。

Answer 1

你需要使用两个反斜杠来逃避冒号：

$('#test\\:abc')

Answer 2

简而言之

你应该使用

$(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 which tests and compares the speed of selection methods of IDs with colons

您需要打开firebug控制台才能获得结果。

我用firefox 10和jquery 1.7.2

测试了它

基本上我选择了一个带有冒号的div的10'000次div - 用不同的方法来实现它。然后我将结果与没有冒号的ID选择进行比较，结果非常令人惊讶。

以ms为单位的剩余时间右选择器方法

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

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

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


71 $("#nocolon")

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

尤其

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

有点令人惊讶

Answer 3

显然，它正在绊倒冒号，因为jQuery试图将其解释为选择器。尝试使用id属性选择器。

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

Answer 4

我只会使用document.getElementById，并将结果传递给jQuery()函数。

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

Answer 5

使用两个反斜杠\\

DEMO

写在这里

如果你想使用任何一个元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）文字的一部分，你必须用两个逃避角色反斜杠：\。例如，如果你有一个id =“foo.bar”的元素，你可以使用选择器$（“＃foo \ .bar”）。 W3C CSS规范包含完整

Reference

Answer 6

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

Answer 7

尝试使用$('#test\\:abc')

Answer 8

此语法$('[id="test:abc"]') 为我工作。我正在使用Netbeans 6.5.1＆amp;它会生成包含id的{{1}}的组件。我试过了: (colon)＆amp; \\，但没有一个工作。

Answer 9

使用$('[id=id:with:colon]')。

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

9 个答案:

DEMO