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

Question

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

这些span元素已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做一个paginator .show()并.hide()隐藏或显示我的元素时遇到了确切的问题.考虑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 ...我希望这可以帮助其他人,有同样的问题!

Answer 2

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

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