jQuery :visible选择器在Webkit上不起作用

Question

我需要选择一个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 bug吗？

我通过以下方式解决了这个问题：

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

但是这让我感到困扰，因为它似乎是一种错误的解决方案，正确的解决方案应该使用:visible，但它在Webkit上不起作用。

jQuery 1.6.4

- bsedlm

---

我曾经在Chrome中遇到过类似的问题，涉及空标签和.is(':visible')。其中，<span></span>被注册为false，但<span> </span>被注册为true。 - DrShaffopolis

Answer 1

我是一名有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

在使用 jQuery 的 .show() 和 .hide() 来隐藏或显示元素时，我遇到了分页器问题。在 Chrome 中，display:inline 被视为隐藏，这真的是一个问题。

我通过替换以下代码来解决它：

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

通过这个：

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

---

或者在一个函数中进行重复使用：

$(whatever).filter(visibleFilter);

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

这实际上是针对Chrome和IE的修复，因为在Firefox上通常可以正常工作...我希望这可以帮助其他遇到同样问题的人！

- Hugo Dozois

---

太棒了，谢谢。我发现如果我选择的是div，我可以使用filter(":visible")，但是选择span时过滤器就失效了。你的解决方案对于两者都非常有效。 - Joshua Pinter

Answer 2

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

根据jQuery docs，如果元素满足以下条件，则它们是:hidden：

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

特别是最后一条提到的祖先作用域似乎是检查:hidden过滤器是否存在问题的重要事项。

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

- Eelke van den Bos

Answer 3

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

我无法重现你的问题（在IE、Chrome和FF中都尝试过）:/

- Marco Johannesen

---

我想我成功地把它弄坏了http://jsfiddle.net/FRFpH/7/ 这更接近实际的代码，它在一个表格内。在FF中仍然有效。 - bsedlm

我认为，如果最初显示的元素具有块标签（例如<h1>或<p>），那么Webkit会表现得有点奇怪...在这个例子中，尝试从第三个元素中删除<p>标记，它就可以工作了。 - bsedlm

没错，很奇怪。似乎display:inline是唯一困扰chrome的选项。正在尝试解决它 :P - Marco Johannesen