使用 jQuery 处理元素 ID 中的冒号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5552462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling colon in element ID with jQuery
提问by Amit Singh
We are not able to access the div element with ID "test: abc" in JS code using jQuery.
我们无法使用 jQuery 在 JS 代码中访问 ID 为“test:abc”的 div 元素。
<div id="test:abc">
$('#test:abc')
It's working fine without colon. We do not have control on ID generation as it is auto generated in Trinidad sub forms because it attaches sub form ID with :to every element inside it.
它在没有冒号的情况下工作正常。我们无法控制 ID 生成，因为它是在 Trinidad 子表单中自动生成的，因为它将子表单 ID 附加:到其中的每个元素。
回答by nfechner
You need to escape the colon using two back-slashes:
您需要使用两个反斜杠来转义冒号：
$('#test\:abc')
回答by Toskan
In short
简而言之
$(document.getElementById("test:abc"))is what you should use.
$(document.getElementById("test:abc"))是你应该使用的。
Explanation: Apart from the speed gain (see further down), it is easier to handle.
说明：除了速度增益（见下文），它更容易处理。
Example: Say you have a function
示例：假设您有一个函数
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);
Speed / Timing
速度/时间
have a look at this jsbin which tests and compares the speed of selection methods of IDs with colons
看看这个jsbin，它测试和比较带有冒号的 ID 选择方法的速度
you need to open your firebug console to get the results.
你需要打开你的萤火虫控制台才能得到结果。
I tested it with firefox 10 and jquery 1.7.2
我用 firefox 10 和 jquery 1.7.2 测试过
basically I did a select 10'000 times of a div with a colon in the id - with the different methods to achieve it. Then I compared results to a ID selection with no colon in it, the results are quite surprising.
基本上我选择了 10'000 次在 id 中带有冒号的 div - 使用不同的方法来实现它。然后我将结果与没有冒号的 ID 选择进行比较，结果非常令人惊讶。
left time in ms right selector method
ms 右选择器方法中的剩余时间
299 $("#annoying\:colon")
302 $("[id='annoying:colon']"
20 $(document.getElementById("annoying:colon"))
71 $("#nocolon")
294 $("[id='nocolon']")
especially
尤其
71 $("#nocolon") and
299 $("#annoying\:colon")
comes a bit as a surprise
有点意外
回答by tvanfosson
It's tripping up on the colon, obviously, because jQuery is trying to interpret it as a selector. Try using the id attribute selector.
显然，它在冒号上绊倒了，因为 jQuery 试图将它解释为选择器。尝试使用 id 属性选择器。
$('[id="test:abc"]')
回答by wsanville
I would just use document.getElementById, and pass the result to the jQuery()function.
我只会使用document.getElementById, 并将结果传递给jQuery()函数。
var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc')
回答by diEcho
use two backslash \\
使用两个反斜杠 \\
DEMO
演示
as written here
写在这里
If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete
如果您希望使用任何元字符（例如 !"#$%&'()*+,./:;<=>?@[]^`{|}~ ）作为名称，您必须使用两个反斜杠转义字符：\。例如，如果您有一个 id="foo.bar" 的元素，则可以使用选择器 $("#foo\.bar")。W3C CSS 规范包含完整的
回答by Ramsay
Referring to Toskan's answer, I updated his code to make it a bit more readable and then output to the page.
参考 Toskan 的回答，我更新了他的代码以使其更具可读性，然后输出到页面。
Here's the jbin link:
http://jsbin.com/ujajuf/14/edit.
Also, I ran it with more iterations
这是 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']")
Even More:
更：
Iterations:10000000
Results:
137987 $("#annyoing\:colon")
140807 $("[id='annyoing:colon']"
7760 $(document.getElementById("annyoing:colon"))
32345 $("#nocolon")
146962 $("[id='nocolon']")
回答by Mithun Sreedharan
try using $('#test\\:abc')
尝试使用 $('#test\\:abc')
回答by JVR
This syntax $('[id="test:abc"]')worked for me. I'm using Netbeans 6.5.1& it generates components with an idthat contains a : (colon). I tried the \\& the \3Abut none of them worked.
这种语法$('[id="test:abc"]')对我有用。我正在使用Netbeans 6.5.1& 它生成带有id包含: (colon). 我尝试了\\& ，\3A但没有一个工作。
回答by zindel
Use $('[id=id:with:colon]').
使用$('[id=id:with:colon]').
