jquery :visible selector not working on webkit

Question

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

这些跨度元素有 display: none;在样式表中设置(我测试过删除它，但没有任何改变)。在其中一个的样式标签上，我将其显示设置为内联。

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

如果我打电话$('#videoDesc > span:hidden');从 chrome 控制台我每次都会得到所有元素，无论我调用其中哪个元素 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() 来隐藏或显示我的元素的分页器时遇到了确切的问题。这确实是 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 上正常运行...我希望这可以帮助其他遇到同样问题的人!