为啥 jQuery 3 不能识别属性选择器中的“#”字符？

Posted 2023-05-09

【中文标题】为啥 jQuery 3 不能识别属性选择器中的“#”字符？

【英文标题】：Why can't jQuery 3 identify the '#' character in an attribute selector?为什么 jQuery 3 不能识别属性选择器中的“#”字符？

【发布时间】：2016-11-19 20:03:24

【问题描述】：

我刚刚尝试将我的应用程序切换到 jQuery 3。我正在经历一些测试并且一切都按预期工作，直到我遇到了一个在选择器中使用“#”符号的应用程序。我有一段 jQuery 看起来像这样：

var $existingFilter = $container.find('.filterFeedItem[data-component-type=#somefilter]');

使用 jQuery 3 我得到一个错误：

jquery-3.0.0.js:1529 Uncaught Error: Syntax error, 
unrecognized expression: .filterFeedItem[data-component-type=#somefilter]

有谁知道为什么 jQuery 不能再解析包含这个符号的选择器？

【问题讨论】：

尝试用引号包裹#somefilter

【参考方案1】：

注意，更改显然发生在 2.0 版，因为 2.1.3 版使用选择器返回元素

var $existingFilter1 = $container.find('.filterFeedItem[data-component-type=#somefilter]');

jsfiddle https://jsfiddle.net/f8nej922/2/

虽然无法在jQuery 2.2 and 1.12 Released 文档中找到对更改的具体参考或描述。

作为@BoltClock 的noted，更改与Selector: Remove "#" exception for identifier tokens 有关。

---

您可以使用\\ 转义# 字符；属性选择器的引用值；或使用$.escapeSelector()

var $existingFilter = $container
                      .find('.filterFeedItem[data-component-type=\\#somefilter]');

---

var $existingFilter = $container
                      .find('.filterFeedItem[data-component-type="#somefilter"]');

---

var $existingFilter = $container
                      .find('.filterFeedItem[data-component-type=' 
                       + $.escapeSelector('#somefilter') + ']');

jsfiddle https://jsfiddle.net/f8nej922/4/

【讨论】：

我将此标记为正确 - 可靠的答案，感谢您的提琴。之前实际上没有使用过 $.escapeSelector 。我最终选择了不需要“#”符号的解决方案。一般来说，这可能是不好的做法——我只是按标签过滤，所以这对这种情况来说有点道理。谢谢！

“不确定更改是否与选择器有关：删除标识符标记的 '#' 异常？”当然是 - 它在发行说明中链接到。但修复本身在Sizzle's codebase - 发布说明链接到包含测试套件的 jQuery 主 repo 中的变更集，而不是 Sizzle 本身。

@BoltClock 建议编辑？或编辑 Answer 以反映指向文档和代码更改的正确路径。

@Robert：这里使用 $.escapeSelector 是不正确的——你最终会转义 整个 选择器字符串，而不仅仅是属性值。你一般只在事先不知道属性值的情况下才使用 $.escapeSelector，例如如果它来自用户输入。

@guest271314: $.escapeSelector('.filterFeedItem[data-component-type=#somefilter]') 转义整个事情，导致\.filterFeedItem\[data-component-type\=\#somefilter\]。您应该只使用它来转义属性值。所以是的，你需要连接。

【参考方案2】：

jQuery's documentation，属性值：

可以是有效标识符或带引号的字符串。

有效的标识符是任何有效的 css 标识符：

https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

在 CSS 中，标识符（包括元素名称、类和 ID） 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或后面的连字符开头 一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如， 标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

由于您想使用#，您需要转义或引用该值：

                         //Note the quotes v --------- v
.find('.filterFeedItem[data-component-type="#somefilter"]');

【讨论】：

坚定的回答帕特里克，因为小提琴，我把它给了guest271314。谢谢！

这并不能解释为什么 jQuery 将选择器视为过去 10 年有效。