jQuery 伪选择器的奇怪行为：可见

Question

我有一个看起来像这样的查询：

$("div.modal:visible select#DTE_Field_calculator\.type")

理论上，这会尝试在当前可见的 div.modal 元素中找到 <select> 标签。

不幸的是，它 return 什么都没有，尽管 DOM 看起来完全符合您的预期 (<div class="modal">...<select id="DTE_Field_calculator.type">...)

如果我删除 :visible (div.modal ...) 过滤器，它会成功找到目标 select 标签。

如果我删除 .modal (div:visible ...) class select 或者，它将再次成功找到正确的 select 标签。

但是当组合使用时，我收到一个空数组。

我能够解决问题的唯一方法是在 :visible documentation page 上实施性能提示，然后更改 select 或者像这样：

$("div.modal").filter(":visible").find("select#DTE_Field_calculator\.type")

这就足够了，当然性能更高，但我有点困惑为什么 selector 一开始就不起作用。我看不出它为什么会以我观察到的方式运行。

有谁知道为什么 :visible 过滤器 selector 与 .modal class selector 结合使用会以某种方式导致整个 select离子失败？我是否漏掉了一些明显的东西？

Answer 1

为了解释这个 'bug'，我猜你使用了无效的 HTML 标记，使用了重复的 ID。

要解释为什么一种方法失败而第二种方法有效，请注意，ID 选择器 returns 仅匹配第一个元素。

这个 $("div.modal:visible select#DTE_Field_calculator\.type") 从右到左读取，匹配第一个元素和 ID，然后检查父元素 .modal 是否可见。

此 $("div.modal").filter(":visible").find("select#DTE_Field_calculator\.type") 正在搜索具有 class modal 的所有元素，过滤可见元素，然后查找 ID 为 DTE_Field_calculator.type.

的元素

这样就可以解释了。所以解决方案是使用 CLASS，而不是 ID.

jQuery 伪选择器的奇怪行为：可见

Strange behaviour with jQuery pseudo selector :visible

javascript

jquery

jquery-selectors