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

Question

这个有效

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

这行得通

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

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

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

为什么？

Answer 1

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

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

i 标志是 new to Selectors 4, and is not implemented in Sizzle. The latest version of every modern browser 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')