我今天注意到 jQuery 的 :visible
选择器在与属性选择器结合使用时会出现意外行为。它的行为因
而异
a) 是内联使用还是在filter方法内使用
b) 与它结合的属性选择器的类型
例子:
给定以下标记
<input required name="name" type="text" />
以下对于 jQuery 是正确的
$('[required="required"]').filter(':visible').length == 0; //true
$('[required="required"]:visible').length == 0; //false - why does jquery find the input?
disabled
属性显示了类似的行为。但是,数据属性不显示相同的行为:
给定以下标记
<input data-boolean name="name" type="text" />
以下对于 jQuery 是正确的
$('[data-boolean="true"]').filter(':visible').length == 0; //true
$('[data-boolean="true"]:visible').length == 0; //true
这是一个指向 fiddle 的链接这说明了问题。
我不希望 [required="required"] 匹配具有空白 required 属性的元素,当单独用作选择器时它不会匹配,但当与 :visible 选择器配对时它会匹配。 这是为什么?
最佳答案
差异的根本原因似乎是当对正式的默认属性值进行显式测试时,Sizzle(jQuery 中的非本地选择器代码)匹配 bool 属性,如 required
。但是, native querySelectorAll()
代码不会这样做,除非该属性实际上具有原始 HTML 中的值。
required
或 readonly
等 bool 选择器可以在没有值的 HTML 中表示,但这意味着该值将被视为属性名称本身。
当您使用像:visible
这样的伪类时,Sizzle 意识到 native 代码将无法工作,因此它会接管。导致问题的不是 :visible
测试本身;您可以使用 :text
或 Sizzle 支持的任何其他扩展获得相同的效果(显然这不会改变选择器的意义)。
我个人认为这是一个错误,尽管它可能有点难以修复,因为当通过 getAttribute()< 查询 DOM 节点时,属性值确实被报告为
.required
/
如果要精心编写 HTML 代码并完全指定属性:
<input required=required ...>
那么就没有感知上的差异,但这似乎有点麻烦。
关于javascript - 为什么 jQuery 的 :visible selector work differently when filtered?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31027623/