当 ID 包含一个点时,如何用 jquery 按 ID 选择 html 节点?

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

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

如何使用 JQuery 选择 # SearchBag. CompanyName? 我不能让它工作,我担心它的点,打破了这一切。 令人恼火的是,重命名我所有的 ID 将是一项繁重的工作,更不用说在可读性方面的损失。

注:
我们别再讨论桌子不是用来摆放的了。我非常了解 CSS 的价值和缺点,并尽可能多地使用它。

89239 次浏览

其中一个变体是:

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

@ Tomalak 评论:

因为 ID 选择器必须在散列 # 之前,所以这里不应该有歧义

“ # id。Class”是一个有效的选择器,它需要一个 id 和一个单独的类来匹配; 它是有效的,并不总是完全冗余的。

选择文字的正确方法。在 CSS 中就是转义它: “ # id。Moliid”。这在一些较老的浏览器(特别是 IE5.x)中会造成麻烦,但是所有现代桌面浏览器都支持它。

同样的方法在 jQuery 1.3.2中似乎也可以使用,尽管我还没有对它进行彻底的测试; Quick Expr 并没有使用它,但是更加复杂的选择器解析器似乎正确地解决了这个问题:

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

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

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

您的问题在文档的开头得到了回答:

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.

如果使用 document.getElementById,您不需要逃避任何东西:

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

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

伙计们,谁在寻找更通用的解决方案,我发现了一个解决方案,其中插入一个向后斜杠之前的任何特殊字符,这解决了相关的问题检索名称和 ID 从包含特殊字符的 div。

“ Str1.str2% str3”. place (/[ ^ w s ]/gi,’$&’)

返回“ Str1.str2% str3”

希望这个有用!

当您的 ID 处于变量中时,attr 选择似乎是合适的:

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

这在 JQuery 选择器 API中有记载:

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

简而言之,以 \\作为 .的前缀。

$('#SearchBag\\.CompanyName')

问题是 .将匹配一个类,因此 $('#SearchBag.CompanyName')将匹配 <div id="SearchBag" class="CompanyName">。与 \\.转义将被视为一个正常的 .,没有特殊意义,匹配您想要的 ID。

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

您可以使用属性选择器:

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

或者可以指定元素类型:

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