当id包含点时,如何通过ID和jquery选择html节点?

时间:2009-03-03 09:03:16

标签: jquery

如果我的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,并尽可能多地使用它。

8 个答案:

答案 0 :(得分:206)

@Tomalak评论:

  

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

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

在CSS中选择文字'。'的正确方法是逃避它:“#id \ .moreid”。这曾经在一些旧的浏览器(特别是IE5.x)中引起麻烦,但所有现代桌面浏览器都支持它。

同样的方法似乎在jQuery 1.3.2中有效,尽管我还没有彻底测试过; quickExpr不会提取它,但更复杂的选择器解析器似乎正确:

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

答案 1 :(得分:116)

一个变体是:

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

答案 2 :(得分:29)

如果您使用document.getElementById

,则无需转义任何内容
$(document.getElementById('strange.id[]'))

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

答案 3 :(得分:16)

简答:如果您的元素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.

答案 4 :(得分:8)

当您的ID位于变量中时,

attr选择似乎是合适的:

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

答案 5 :(得分:4)

jQuery selectors API

中记录了这一点
  

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

简而言之,在.前加上\\

$('#SearchBag\\.CompanyName')

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

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

答案 6 :(得分:2)

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

  

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

     

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

希望这很有用!

答案 7 :(得分:1)

您可以使用属性选择器:

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

或者您可以指定元素类型:

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