为什么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和1.12发布的文档中找到特定的变更或变更描述。

正如指出的通过@BoltClock，变化与选择器：用于标识令牌删除“＃”的异常 。

---

你可以用# \\\\ ; esacape # character; 属性选择器的引用值; 或使用$.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的文档 ，属性值：

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

有效标识符是任何有效的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"]');