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

77

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

something[500]

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

有人知道我该怎么做吗？以下代码似乎无效：

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

经过进一步检查，以下内容：

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

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

— 迈克·特普契奇
source

2

除了正确的答案（这是您需要使用双反斜杠转义括号）之外，您还应真正使用closest（）而不是多个parent（）调用。它更干净，并且如果水平发生变化，则不太可能破裂...因此，如果您要获取最接近的div，则可以执行.closest（'div'）甚至更好的.closest（'div。意义fulclassthatiwant'）

— Paolo Bergantino

感谢您的建议Paolo，但是正如我提到的那样，我不知道我要提前寻找的父母的ID /类别，并且由于父母双方都是div，因此最亲密的父母无法工作。不过谢谢

— 2009年

啊，对不起，我没有看问题，只是看标题和其中的代码:)猜对了，这对我有用。

— Paolo Bergantino，

108

您需要转义方括号，以便不将其计为属性选择器。试试这个：

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

请参阅选择器中的特殊字符，特别是第二段：

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

— karim79
source

jQuery具有内置功能来帮助：api.jquery.com/jQuery.escapeSelector ...例如：$（“＃” + $。escapeSelector（id））其中id可能具有特殊字符

— dlo

12

你也可以

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

— 蒸汽动力的
source

1

以我的拙见，这是最好的答案，尤其是当id完全动态时。

— stackingjasoncooper

9

ID不能包含方括号。它是在规范中禁止的。

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

— 昆汀
source

感谢您提供的规范链接。我意识到它们不是有效的ID，但是Rails为方便起见在控制器中添加了它们。

— 2009年

1

不仅是Rails，许多Web应用程序都使用此技巧，因为它允许表单处理程序遍历数组，而不是对已提交的可选行进行划分。

— Bryan Agee

@BryanAgee —id不是names，大多数表单处理程序库都使用计数来遍历具有相同名称的多个控件，而不是特殊的命名约定或占卜。

— 昆汀

2

@BryanAgee —不，不是。name属性的值不是NAME令牌。

— 昆汀

10

从HTML5开始，这不再是事实。w3.org/TR/html5/dom.html#the-id-attribute。

— Jiloc

9

方括号对jQuery选择器（属性过滤器）有特殊含义。

逃脱这些，它将发现您的元素很好

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

— 彼得·贝利
source

4

试试这个：

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

— 蒂姆·范·哈伦
source

3

您可以使用来逃避它们，\\或者可以执行类似的操作...

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

— 乔什·斯托多拉
source

3

“任何元字符

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

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

例如，具有id =“ foo.bar”的元素可以使用选择器

$("#foo\\.bar")

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

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

（就像其他许多人一样，但是在一起：）

— 猫王西奥蒂
source