当id包含点时，如何使用jquery按ID选择html节点？答案

【问题标题】：How to select html nodes by ID with jquery when the id contains a dot?当id包含点时，如何使用jquery按ID选择html节点？
【发布时间】：2010-10-10 23:25:21
【问题描述】：

如果我的 html 看起来像这样：

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

如何使用 JQuery 选择 #SearchBag.CompanyName？我无法让它工作，我担心它是打破这一切的点。烦人的是，重命名我所有的 id 会很费力，更不用说可读性的损失了。

注意：
请不要开始谈论如何不为布局而制作表格。我非常了解value and shortcomings of CSS，并尽可能多地使用它。

【问题讨论】：

ID中的句点甚至是有效的HTML吗？
是的。 ID 可能包含“-”、“_”、“.”和“:”。 w3.org/TR/html4/types.html#type-name
天哪，我的页面都验证除了 asp.net mvc 框架生成的双标记..
How do I get jQuery to select elements with a . (period) in their ID?的可能重复

标签： jquery

【解决方案1】：

如果你使用document.getElementById，你不需要转义任何东西：

$(document.getElementById('strange.id[]'))

getElementById 假定输入只是一个 id 属性，因此点不会被解释为类选择器。

【讨论】：

简洁的解决方案，也适用于可能包含点的动态 ID

【解决方案2】：

简答：如果你有一个id="foo.bar"的元素，你可以使用选择器$("#foo\\.bar")

更长的答案：这是 jquery 文档的一部分 - 您可以在此处找到部分选择器： http://api.jquery.com/category/selectors/

您的问题已在文档开头得到解答：

如果您希望使用任何元字符（例如 !"#$%&'()*+,./:;?@[\]^`{|}~ ) 作为名称的文字部分，您必须使用两个反斜杠：\\.例如，如果你有一个 id="foo.bar" 的元素，您可以使用选择器 $("#foo\\.bar")。 W3C CSS 规范包含关于有效 CSS 选择器的完整规则集。同样有用的是 Mathias Bynens 关于标识符的 CSS 字符转义序列的博客条目。

【讨论】：

您确实意识到这个问题已经存在了三年多，并且当时的文档可能不一样，对吧？

【解决方案3】：

您可以使用属性选择器：

$("[id='SearchBag.CompanyName']");

或者你可以指定元素类型：

$("input[id='SearchBag.CompanyName']");

【讨论】：

【解决方案4】：

这记录在jQuery selectors API:

使用任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~) 作为名称的文字部分，它必须用两个反斜杠转义：\\。例如，一个元素 id="foo.bar"，可以使用选择器$("#foo\\.bar")。

简而言之，在. 前加上\\。

$('#SearchBag\\.CompanyName')

问题是. 会匹配一个类，所以$('#SearchBag.CompanyName') 会匹配<div id="SearchBag" class="CompanyName">。带有\\. 的转义符将被视为普通的.，没有特殊意义，匹配您想要的ID。

这适用于所有字符 !"#$%&'()*+,./:;<=>?@[\]^`{|}~，否则它们作为 jQuery 中的选择器具有特殊意义。

【讨论】：

【解决方案5】：

当您的 ID 在变量中时，attr 选择似乎是合适的：

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

【讨论】：

【解决方案6】：

正在寻找更通用解决方案的人，我找到了一种解决方案，它在任何特殊字符之前插入一个反斜杠，这解决了与从包含特殊字符的 div 检索名称和 ID 相关的问题。

"Str1.str2%str3".replace(/[^\w\s]/gi, '\\$&')

返回“Str1\\.str2\\%str3”

希望这有用！

【讨论】：

【解决方案7】：

@Tomalak 在 cmets 中：

由于 ID 选择器必须以 # 开头，因此此处不应有歧义

“#id.class”是一个有效的选择器，它需要一个 id 和一个单独的类来匹配；它是有效的，并不总是完全多余的。

在 CSS 中选择文字“.”的正确方法是将其转义：“#id\.moreid”。这曾经在一些较旧的浏览器（尤其是 IE5.x）中造成问题，但所有现代桌面浏览器都支持它。

同样的方法似乎在 jQuery 1.3.2 中有效，虽然我没有彻底测试过； quickExpr 没有选择它，但更多涉及的选择器解析器似乎正确：

$('#SearchBag\\.CompanyName');

【讨论】：

“#id.class 是一个有效的选择器，它需要一个 id 和一个单独的类来匹配”：根据 HTML 规范，ID 在整个文档中必须是唯一的。 “#id.class”有什么用？我的意思是，你不能比“#id”更具体，对吗？
@Tom：“#id.class”可能适用于使用相同样式表的多个文档，或者使用客户端脚本设置状态。例如“#navhome.navselected”。
@bobince：是的，cletus 提出了同样的例子，我怀疑它是否有效。对我来说仍然感觉很奇怪，我看不出能够做到这一点的真正优势。尤其是鉴于 HTML 允许 ID 中包含点，并且您始终可以使用“.navselected”来实现这一点。
例如，您可能希望选定的#navhome 以与选定的#navabout 不同的颜色亮起，但要共享其他 .navselected 属性。我不会说这种情况总是出现，但我确实偶尔需要它。
我觉得@Tomalak 的回答更优雅，比如：$('[id="profile.birthdate"]')

【解决方案8】：

一种变体是这样的：

$("input[id='SearchBag.CompanyName']")

【讨论】：

确实如此。您能告诉我为什么您的解决方案有效而 $("#SearchBag.CompanyName") 无效吗？
因为 .CompanyName 被视为类选择器。
快速查看源代码，要么是深思熟虑的设计决策，要么是bug。用于标识 id 选择器（名为 quickExpr）的正则表达式不包括作为有效字符的点。然而，HTML 规范允许这样做。
在 ID 上使用类选择器可能很有用。想象一下，您在每个页面上都有一个#menu 元素，但希望在其中一个页面上使其不同。例如#menu.hideme？边际我知道，但它是有效的。
这显然是最好的答案。也适用于这样的变量： $("tr[id='" + private_var + "']").css("background-color", "#EEEEEE");