不区分大小写的属性标志与 :visible 选择器一起使用

Posted 2023-03-05

【中文标题】不区分大小写的属性标志与 :visible 选择器一起使用

【英文标题】：Case insensitive attribute flag in conjunction with :visible selector

【发布时间】：2022-01-22 09:11:09

【问题描述】：

这行得通

$('input[name=email i]')

这行得通

$('input[name=email]:visible')

但这不起作用（无法识别的表达式）

$('input[name=email i]:visible')

为什么？

【问题讨论】：

请发布一个您正在使用它的 html 示例

HTML 无关紧要，因为它会抛出异常Uncaught Error: Syntax error, unrecognized expression: input[name=email i]:visible

说真的，我们非常注重尽可能减少可重现的示例......但我们一直要求人们用不必要的 HTML 来填补他们的问题，究竟是为了什么？

【参考方案1】：

这是因为 jQuery 会根据给定的选择器切换选择器引擎。默认情况下，当给定一个有效的 CSS 选择器时，jQuery 通过 document.querySelectorAll() 将其传递给浏览器的本地选择器引擎以匹配元素。这是为了最大限度地提高性能。

另一方面，当给定一个非标准选择器时，jQuery 使用它自己的 Sizzle 引擎来匹配元素，以便它可以评估它自己的非标准选择器。 :visible 就是这样一种选择器，因此只有 Sizzle 理解它，并且它是匹配所必需的。

i 标志是new to Selectors 4，并没有在 Sizzle 中实现。每个现代浏览器的最新版本now supports this feature，所以选择器就像

$('input[name=email i]')

由于使用了document.querySelectorAll()，它将适用于所有现代浏览器。但是在不支持它的旧版本中，这将被视为无效的 CSS 选择器并由 Sizzle 处理。在这些情况下，这个选择器根本不起作用。

将 jQuery 自己的 :visible 添加到选择器会强制 jQuery 使用 Sizzle。但由于 Sizzle 无法识别 i 标志，因此选择器表达式被视为无法识别。

您可以通过将:visible 与选择器的其余部分分开来解决此问题，以便浏览器可以处理i 标志并且Sizzle 可以处理:visible。你可以使用.filter()：

$('input[name=email i]').filter(':visible')