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

【问题标题】：Handling colon in element ID with jQuery使用 jQuery 处理元素 ID 中的冒号
【发布时间】：2011-07-29 23:26:04
【问题描述】：

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

<div id="test:abc">

$('#test:abc')

没有冒号也可以正常工作。我们无法控制 ID 生成，因为它是在 Trinidad 子表单中自动生成的，因为它会将带有 : 的子表单 ID 附加到其中的每个元素。

【问题讨论】：

基本上没有被接受是好的，因为最好的答案最终不是最高评价的（提示：检查我的答案）
很高兴您找到了解决方案，Trinidad 子表单需要整理它们的命名约定。
IBM Domino (xpages) 做同样的事情。考虑到冒号是合法的 ID 文本，问题出在 jquery 上。

标签： jquery

【解决方案1】：

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

$('#test\\:abc')

【讨论】：

【解决方案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

你需要打开你的萤火虫控制台来获得结果。

我用 firefox 10 和 jquery 1.7.2 对其进行了测试

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

剩余时间（毫秒）右选择器方法

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

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

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


71 $("#nocolon")

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

特别是

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

有点意外

【讨论】：

这真的很有用，应该得到更多的支持。即使这样，$("[id='annoying:colon']" 有效。document.getElementById 似乎是应该使用的。
仅仅因为它更快而简单地使用更复杂的代码来归档相同的结果是过早优化的一种情况。除非它是性能瓶颈，否则您应该始终更喜欢可读代码而不是快速代码。或者用Wiliam Wulf 的话来说：“以效率的名义（不一定实现）比任何其他单一原因——包括盲目的愚蠢——犯下了更多的计算罪。”更多信息here.
使用较新的 jQuery (2.1.1) 似乎更好：32 $("#annyoing\\:colon"), 29 $("[id='annyoing:colon']"), 5 $(document.getElementById("annyoing:colon")), 8 $("#nocolon"), 31 $("[id='nocolon']")
@Möhre 很高兴听到。遗憾的是 IE8 仍然是一个问题（jQuery 2 不支持）。但是 IE8 的倒计时正在进行中theie8countdown.com
@nfechner。您认为什么更具可读性？ $("#annoying\\:colon") 或 $(document.getElementById("annoying:colon")) ?

【解决方案3】：

显然，它在冒号上出错了，因为 jQuery 试图将其解释为选择器。尝试使用 id 属性选择器。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用两个反斜杠\\

DEMO

这里写的

如果您想使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ) 作为名字的字面部分，你必须用两个转义字符反斜杠：\.例如，如果您有一个 id="foo.bar" 的元素，你可以使用选择器 $("#foo\.bar")。 W3C CSS 规范包含完成

Reference

【讨论】：

【解决方案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']")

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

这个语法$('[id="test:abc"]') 为我工作。我正在使用Netbeans 6.5.1 & 它生成带有id 的组件，其中包含: (colon)。我尝试了\\ 和\3A，但都没有奏效。

【讨论】：

【解决方案9】：

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

【讨论】：