我有一个如下所示的查询:
$("div.modal:visible select#DTE_Field_calculator\\.type")
理论上，它会尝试找到 <select>当前可见 div.modal 内的标记元素。
不幸的是，它什么也不返回，尽管 DOM 看起来完全符合您的预期 ( <div class="modal">...<select id="DTE_Field_calculator.type">... )
如果我删除了:visible ( div.modal ... ) 过滤器，成功找到目标 select 标签。
如果我删除 .modal ( div:visible ... ) 类选择器，它将再次成功找到正确的选择标签。
但是当组合使用时，我收到一个空数组。
我能够解决该问题的唯一方法是在 :visible documentation page上实现性能提示。 ，然后像这样更改选择器:
$("div.modal").filter(":visible").find("select#DTE_Field_calculator\\.type")
这已经足够了，当然性能也更高，但我有点困惑为什么选择器首先不起作用。我看不出它有什么理由按照我观察到的方式行事。
有谁知道为什么 :visible过滤器选择器，与 .modal 结合使用类选择器，会以某种方式导致整个选择失败吗？我是否遗漏了一些明显的东西？
最佳答案
为了解释这个“错误”，我猜您正在使用无效的 HTML 标记，使用重复的 ID。
要解释为什么一个方法失败而另一个方法有效，请注意，ID 选择器仅返回第一个匹配的元素。
此 $("div.modal:visible select#DTE_Field_calculator\\.type") 从右向左读取，将第一个元素与 ID 匹配，然后检查父元素 .modal 可见。
此 $("div.modal").filter(":visible").find("select#DTE_Field_calculator\\.type") 正在搜索具有类 的所有元素modal，过滤可见的，然后查找 ID 为 DTE_Field_calculator.type 的元素。
这样就可以解释了。所以解决方案是使用 CLASS，而不是 ID。
关于javascript - jQuery 伪选择器的奇怪行为 :visible，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30175268/