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错误吗？

我能够解决这个问题：

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

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

jQuery 1.6.4

Answer 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 ...我希望这可以帮助其他人，遇到同样的问题！

Answer 2

你可以测试一下：http://jsfiddle.net/FRFpH/

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

Answer 3

:hidden选择器比简单的'display' != 'hidden'比较更多。

根据jQuery docs，元素为:hidden if：

CSS显示值为none。
它们是type =＆＃34; hidden＆＃34;。
它们的宽度和高度明确设置为0.
隐藏了一个祖先元素，因此页面上不会显示该元素。

特别是提及祖先范围的最后一个子弹似乎是一个重要的事情，检查你是否有:hidden过滤器的问题。

免责声明：文档还说明了不同jQuery版本在选择器行为方面的许多变化。

jquery：可见的选择器不能在webkit上运行

3 个答案: