jquery：可见选择器在 webkit 上不起作用答案

【问题标题】：jquery :visible selector not working on webkitjquery：可见选择器在 webkit 上不起作用
【发布时间】：2011-11-11 00:17:37
【问题描述】：

我需要在 div 内的列表中选择一个可见的 span 元素，如下所示：$('#videoDesc > span:visible') 或 $('#videoDesc > span').filter(':visible')，它在 webkit 中不起作用

这些 span 元素在样式表中设置了 display: none;（我测试了删除它，但没有任何改变）。在其中一个的样式标签上，我将其显示设置为 inline。

使用 jQuery 的 show() 和 hide() 函数修改 span 元素的显示。

如果我从 chrome 控制台调用$('#videoDesc > span:hidden');，我每次都会得到所有元素，不管我调用了哪个show()。同样，$('#videoDesc > span:visible'); 每次都会给我一个空列表：[]。

在 Firefox 和 IE 中我没有这个问题。

我从 chrome 控制台复制了这个。如您所见，span 元素 videoDesc-1 有一个 style="display: inline;" 并且在使用 :hidden 时仍然会出现

$('#videoDesc > span').filter(':hidden');
[<span id="videoDesc-1" style="display: inline;">…</span> ,
<span id="videoDesc-2">…</span> , <span id="videoDesc-3">…</span> , 
<span id="videoDesc-4">…</span>]

这是某种 webkit 错误吗？

我能够解决这个问题：

$('#videoDesc > span').each(function(i, e) {
    if (this.style.display != 'none') {
        ...
    }
});

但这让我很困扰，因为这似乎是一个错误的解决方案，正确的是使用:visible，但它在 webkit 上不起作用

jQuery 1.6.4

【问题讨论】：

我已经看到空标签和 .is(':visible') 的类似问题，特别是在 Chrome 中。注册为 false，但注册为真。

标签： jquery jquery-selectors webkit

【解决方案1】：

我在使用 jQuery .show() 和 .hide() 来隐藏或显示我的元素时遇到了确切的问题。考虑到display:inline 是隐藏的，这确实是 chrome 的问题。

我通过替换它来解决它：

$(whatever).filter(':visible');

通过这个：

$(whatever).filter(function(){ return $(this).css('display') != 'none';});

或在函数中进行再利用：

$(whatever).filter(visibleFilter);

function visibleFilter(){
    return $(this).css('display') != 'none';
}

这确实是对 chrome 和 IE 的修复，因为它可以在 Firefox 上正常运行......我希望这可以帮助其他遇到同样问题的人！

【讨论】：

太棒了，谢谢。我发现如果我选择divs，我可以使用filter(":visible")，但在选择spans 时过滤器坏了。您的解决方案对两者都适用。

【解决方案2】：

你能测试一下吗：http://jsfiddle.net/FRFpH/

无法重现您的问题（在 IE、Chrome 和 FF 中都试过）：/

【讨论】：

我想我设法打破它jsfiddle.net/FRFpH/7 更接近实际代码，它在一个表内。在 FF 中仍然有效
我相信如果最初显示的元素有一个块标签（例如<h1>或<p>）那么webkit的行为有点奇怪......jsfiddle.net/FRFpH/8在这个例子中尝试删除@ 987654326@ 来自第三个元素的标签，它可以工作
你说得对，真奇怪。似乎 display:inline 是窃听 chrome 的唯一选项。玩弄它：P

【解决方案3】：

:hidden 选择器不仅仅是简单的 'display' != 'hidden' 比较。

根据 jQuery docs 一个元素是 :hidden 如果：

它们的 CSS 显示值为 none。
它们是 type="hidden" 的表单元素。
它们的宽度和高度明确设置为 0。
祖先元素被隐藏，因此该元素不会显示在页面上。

特别是最后一个提到祖先作用域的项目符号似乎是检查您是否遇到:hidden 过滤器问题的重要事项。

免责声明：文档还说明了不同 jQuery 版本之间关于选择器行为的许多变化。

【讨论】：