当ID包含方括号时按ID查找DOM元素？答案

【问题标题】：Find DOM element by ID when ID contains square brackets?当ID包含方括号时按ID查找DOM元素？
【发布时间】：2010-11-17 08:49:52
【问题描述】：

我有一个 DOM 元素，其 ID 类似于：

something[500]

它是由我的 Ruby on Rails 应用程序构建的。我需要能够通过 jQuery 获取此元素，以便我可以遍历 DOM 以删除其父级的父级，该父级具有我无法事先访问的变量 ID。

有人知道我该怎么做吗？以下代码似乎不起作用：

alert($("#something["+id+"]").parent().parent().attr("id"));

经进一步检查，如下：

$("#something["+id+"]")

返回一个对象，但是当我在其上运行“.html()”或“.text()”时，结果始终为 null 或只是一个空字符串。

【问题讨论】：

除了正确的答案（即你需要用双反斜杠转义括号）之外，你真的应该使用最接近（）而不是多个父（）调用。如果一个级别发生变化，它会更干净并且不太可能中断......所以如果你想获得最接近的 div 你会做 .closest('div') 甚至更好 .closest('div.meaningfulclassthatiwant')
感谢 Paolo 的建议，但正如我所提到的，我不知道我要提前寻找的父母的 ID/类，并且由于父母都是 div，因此最接近的不起作用.不过还是谢谢。
啊，抱歉，我没有阅读问题，只是看了标题和其中的代码：) 猜猜对了。

标签： javascript jquery ruby-on-rails dom

【解决方案1】：

您需要对方括号进行转义，以免它们被视为属性选择器。试试这个：

alert($("#something\\["+id+"\\]").parent().parent().attr("id"));

See Special Characters In Selectors，特别是第二段：

要将任何元字符（例如!"#$%&'()*+,./:;<=>?@[\]^``{|}~）用作名称的文字部分，必须使用两个反斜杠对其进行转义：\\。例如，带有id="foo.bar" 的元素可以使用选择器$("#foo\\.bar")。 W3C CSS 规范包含complete set of rules regarding valid CSS selectors。 Mathias Bynens 在CSS character escape sequences for identifiers 上的博客条目也很有用。

【讨论】：

jQuery 有一个内置函数来帮助：api.jquery.com/jQuery.escapeSelector ... 例如：$("#"+$.escapeSelector(id)) 其中 id 可能有特殊字符

【解决方案2】：

试试这个：

alert($("#something\\["+id+"\\]").parent()[0].parent()[0].attr("id"));

【讨论】：

【解决方案3】：

方括号对jQuery selectors有特殊意义，属性过滤器专门。

只要避开这些，它就会发现你的元素很好

$( "#something\\[" + id + "\\]" )

【讨论】：

【解决方案4】：

ID不能包含方括号。它是forbidden by the spec。

某些浏览器可能会错误纠正和应对，但您应该修复数据而不是尝试处理不良数据。

【讨论】：

感谢规范的链接。我意识到它们不是有效的 ID，但 Rails 为方便起见在控制器中添加了它们。
不只是 rails——许多 web 应用程序都使用这个技巧，因为它允许表单处理程序遍历数组，而不是预测已提交的可选行数。
@BryanAgee — ids 不是 names，并且大多数表单处理程序库使用计数来迭代具有相同名称的多个控件，而不是特殊的命名约定或占卜。
@BryanAgee — 不，它没有。 name 属性的值不是 NAME 令牌。
从 HTML5 开始，这不再是真的了。 w3.org/TR/html5/dom.html#the-id-attribute.

【解决方案5】：

您可以使用\\ 转义它们，或者您可以执行类似的操作...

$(document.getElementById("something[" + id + "]"))

【讨论】：

【解决方案6】：

你也可以这样做

$('[id="something['+id+']"]')

【讨论】：

在我看来这是最好的答案，尤其是当 id 是完全动态的时。

【解决方案7】：

"任何元字符

!"#$%&'()*+,./:;<=>?@[\]^`{|}~

作为名称的文字部分，必须使用两个反斜杠进行转义：\\。

例如一个id="foo.bar"的元素，可以使用选择器

$("#foo\\.bar")

" [来源：jquery doc] 和一个 id="foo[bar]" 的元素（即使对 W3C 无效但被 JQuery 识别），可以使用选择器

$("#foo\\[bar\\]")

（就像许多其他人一样，只是一个回答，但都在一起:)）

【讨论】：