在 ID 包含特殊字符的 HTML 元素上使用 JQuery答案

【问题标题】：Using JQuery on HTML elements with Ids containing special characters在 ID 包含特殊字符的 HTML 元素上使用 JQuery
【发布时间】：2021-01-18 05:58:58
【问题描述】：

问题：在 ID 包含特殊字符的 HTML 元素上使用 JQuery。任何特殊字符都可以出现在 Id 中的任何位置。在 90% 的情况下，这些将是空格、句号和破折号。

我想我找到了一个可能的解决方案，但找不到任何支持这一点的文档。

假设 sElementId 是一个包含特殊字符的 html 元素 ID。使用以下语法不起作用：

$('#'+sElementId).addClass("pointer");

但是添加一对方括号就像一个魅力：

$(['#'+sElementId]).addClass("pointer");

我的问题是。这是在选择器中正确使用方括号吗？

【问题讨论】：

ID 在 HTML 中不应包含空格。所以，如果你能改变它，那就解决了问题的根源。
好的。谢谢。我可以处理空格，但这仍然是在 JQuery 选择器中使用 [ ] 的有效方式吗？
好吧，定义“有效”。它对你的目的有用吗？您是否注意到任何问题？
它工作得非常好。我只是无法处理任何支持以这种方式使用方括号的文档或代码示例。
你确定它真的有效吗？（即您是否检查了 pointer 类是否已添加到元素中，并且如果没有那段代码就不会添加它？） -- 还有您使用的是哪个版本的 jQuery？

标签： javascript html jquery css-selectors

【解决方案1】：

实际上，它不起作用，并且做了一些你没想到的事情。

来自jQuery documentation：

jQuery( object )

对象
类型：PlainObject
包装在 jQuery 对象中的普通对象。

因此，如果您调用$(["#a b"])（或只是$(["a"])），您将获得该字符串数组的jQuery 包装器对象。它看起来像一个典型的 jQuery 选择器对象，但事实并非如此。 addClass 对该对象没有影响。

$([1]).addClass("pointer") // no operation

要选择对象，只需使用$(document.getElementById("a b"))（$() 将其转换为 jQuery 对象）。

或者：

如果有多个元素具有相同的id（注意这是无效的）：javascript - Get multiple elements by Id - Stack Overflow
转义ID以使用$(String.raw`#a\ b`)（或等效$("#a\\ b")）：https://stackoverflow.com/a/4823616/5267751

【讨论】：