jQuery 当id包含一个点时，如何使用jquery通过ID选择html节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/605630/
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
How to select html nodes by ID with jquery when the id contains a dot?
提问by Boris Callens
If my html looked like this:
如果我的 html 看起来像这样：
<td class="controlCell">
<input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>
How could I select #SearchBag.CompanyName with JQuery? I can't get it to work and I fear it's the dot that's breaking it all. The annoying thing is that renaming all my id's would be a lot of work, not to mention the loss in readability.
如何使用 JQuery 选择 #SearchBag.CompanyName？我无法让它工作，我担心是这个点打破了这一切。令人讨厌的是，重命名我所有的 id 需要做很多工作，更不用说可读性的损失了。
Note:
Please let's not start talking about how tables are not made for lay-outing. I'm very aware of the value and shortcomings of CSSand try hard to use it as much as possible.
回答by bobince
@Tomalak in comments:
@Tomalak 在评论中：
since ID selectors must be preceded by a hash #, there should be no ambiguity here
因为 ID 选择器前面必须有一个哈希 #，所以这里应该没有歧义
“#id.class” is a valid selector that requires both an id and a separate class to match; it's valid and not always totally redundant.
“#id.class”是一个有效的选择器，它需要一个 id 和一个单独的类来匹配；它是有效的，并不总是完全多余的。
The correct way to select a literal ‘.' in CSS is to escape it: “#id\.moreid”. This used to cause trouble in some older browsers (in particular IE5.x), but all modern desktop browsers support it.
选择文字“.”的正确方法 在 CSS 中是转义它：“#id\.moreid”。这曾经在一些较旧的浏览器（特别是 IE5.x）中引起问题，但所有现代桌面浏览器都支持它。
The same method does seem to work in jQuery 1.3.2, though I haven't tested it thoroughly; quickExpr doesn't pick it up, but the more involved selector parser seems to get it right:
同样的方法似乎在 jQuery 1.3.2 中也能工作，尽管我还没有对其进行彻底的测试；quickExpr 没有选择它，但更复杂的选择器解析器似乎是正确的：
$('#SearchBag\.CompanyName');
回答by Tomalak
One variant would be this:
一种变体是这样的：
$("input[id='SearchBag.CompanyName']")
回答by Blender
You don't need to escape anything if you use document.getElementById:
如果您使用，则无需转义任何内容document.getElementById：
$(document.getElementById('strange.id[]'))
getElementByIdassumes the input is just an id attribute, so the dot won't be interpreted as a class selector.
getElementById假设输入只是一个 id 属性，所以点不会被解释为类选择器。
回答by oneiros
Short Answer: If you have an element with id="foo.bar", you can use the selector $("#foo\\.bar")
简短回答：如果您有一个带有 id= 的元素"foo.bar"，则可以使用选择器$("#foo\\.bar")
Longer Answer: This is part of the jquery documentation - section selectors which you can find here: http://api.jquery.com/category/selectors/
更长的答案：这是 jquery 文档的一部分 - 您可以在此处找到部分选择器：http: //api.jquery.com/category/selectors/
Your question is answered right at the beginning of the documentation:
您的问题在文档的开头得到了回答：
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 set of rules regarding valid CSS selectors. Also useful is the
blog entry by Mathias Bynens on CSS character escape sequences for identifiers.
回答by bishop
attr selection seems to be appropriate when your ID is in a variable:
当您的 ID 在变量中时，属性选择似乎是合适的：
var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');
回答by Jon Surrell
This is documented in the jQuery selectors API:
这记录在jQuery 选择器 API 中：
To use any of the meta-characters (such as
!"#$%&'()*+,./:;<=>?@[\]^`{|}~) as a literal part of a name, it must be escaped with with two backslashes:\\. For example, an element withid="foo.bar", can use the selector$("#foo\\.bar").
要将任何元字符（例如
!"#$%&'()*+,./:;<=>?@[\]^`{|}~）用作名称的文字部分，必须使用两个反斜杠对其进行转义：\\. 例如，带有 , 的元素id="foo.bar"可以使用选择器$("#foo\\.bar")。
In short, prefix the .with \\.
总之，前缀.用\\。
$('#SearchBag\.CompanyName')
The problem is that .will match a class, so $('#SearchBag.CompanyName')would match <div id="SearchBag" class="CompanyName">. The escaped with \\.will be treated as a normal .with no special significance, matching the ID you desire.
问题是它.会匹配一个类，所以$('#SearchBag.CompanyName')也会匹配<div id="SearchBag" class="CompanyName">. 转义的 with\\.将被视为.没有特殊意义的正常，与您想要的 ID 匹配。
This applies to all the characters !"#$%&'()*+,./:;<=>?@[\]^`{|}~which would otherwise have special significance as a selector in jQuery.
这适用于所有!"#$%&'()*+,./:;<=>?@[\]^`{|}~在 jQuery 中作为选择器具有特殊意义的字符。
回答by Abhishek
Guys who's looking for more generic solution, I found one solution which inserts one backward slashes before any special characters, this resolves issues related to retrieving name & ID from a div which contains special characters.
正在寻找更通用解决方案的人，我找到了一种解决方案，它在任何特殊字符之前插入一个反斜杠，这解决了与从包含特殊字符的 div 检索名称和 ID 相关的问题。
"Str1.str2%str3".replace(/[^\w\s]/gi, '\\$&')
returns "Str1\\.str2\\%str3"
"str1.str2%str3".replace(/[^\w\s]/gi, '\\$&')
返回“Str1\\.str2\\%str3”
Hope this is useful !
希望这是有用的！
回答by ntroccoli
You can use an attribute selector:
您可以使用属性选择器：
$("[id='SearchBag.CompanyName']");
Or you can specify element type:
或者您可以指定元素类型：
$("input[id='SearchBag.CompanyName']");
