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

Question

我刚刚尝试将我的应用程序切换到 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 无法再解析包含此符号的选择器？

Answer 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 文档中找到对更改的具体参考或描述。

如 by @BoltClock, change is related to 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/

Answer 2

通过jQuery's documentation，属性值：

Can be either a valid identifier or a quoted string.

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

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B WF".

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

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

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

Why can't jQuery 3 identify the '#' character in an attribute selector?

html

javascript

jquery

dom

jquery-selectors