当 ID 包含方括号时,按 ID 查找 DOM 元素?

IT技术 javascript jquery ruby-on-rails dom
2021-02-10 10:47:36

我有一个 ID 类似于的 DOM 元素:

something[500]

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

有谁知道我该怎么做?以下代码似乎不起作用:

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

经进一步检查,如下:

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

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

6个回答

您需要对方括号进行转义,以便它们不被视为属性选择器。试试这个:

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

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

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

jQuery 有一个内置函数来帮助:api.jquery.com/jQuery.escapeSelector ... 例如: $("#"+$.escapeSelector(id)) 其中 id 可能有特殊字符
2021-03-30 10:47:36

你也可以这样做

$('[id="something['+id+']"]')
在我看来,这是最好的答案,尤其是当 id 是完全动态的时。
2021-03-20 10:47:36

id不能包含方括号。这是规范禁止的

一些浏览器可能会错误纠正和应对,但你应该修复你的数据而不是试图处理坏数据。

感谢您提供规范的链接。我意识到它们不是有效的 ID,但 Rails 为方便起见在控制器中添加了它们。
2021-03-22 10:47:36
@BryanAgee — ids 不是names,大多数表单处理程序库使用计数来迭代多个具有相同名称的控件,而不是特殊的命名约定或占卜。
2021-03-25 10:47:36
@BryanAgee - 不,不是。name属性的值不是NAME标记。
2021-03-31 10:47:36
从 HTML5 开始,这不再是真的。w3.org/TR/html5/dom.html#the-id-attribute
2021-04-01 10:47:36
不仅仅是 rails——许多 Web 应用程序都使用这个技巧,因为它允许表单处理程序遍历一个数组,而不是划分已提交的许多可选行。
2021-04-11 10:47:36

方括号对jQuery 选择器有特殊意义,特别是属性过滤器。

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

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

试试这个:

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