Question

我有这个简单的html标记，由经典的asp：

生成

<table>
  <tr class="trClass">
    <td>Hello </td>
  </tr>
  <tr class ="trClass">
    <td>World!</td> 
  </tr>
</table>

如果我使用Jquery将属于Hello的tr设置为hide（），它会隐藏。好！

但是，当我使用这个$（'。trClass：visible'）。each（function（）{alert（'visible'）}）; 它显示输出'可见'两次。

为什么会这样？

我的问题是我使用选择框过滤列上的表格。但是在过滤之后我需要对表中可见的那些行执行一些计算，但我现在得到所有行。

有什么想法吗？

/ Daniel

Answer 1

:visible选择器不会测试display样式属性，而是要使用:hidden代替the 1.3.2 release notes say：

...如果您的元素的CSS显示是 “无”，或其任何父/祖先元素的显示是“无”，或者如果是 element的宽度为0，元素为高度为0然后是一个元素报告为隐藏。

这些将正确选择您的可见行：

$('.trClass:not(:hidden)').each(function() { 
    alert('visible'); 
});

或：

$('.trClass').each(function() { 
    if(!$(this).is(':hidden')) {
        alert('visible'); 
    }
});

或：

$('.trClass').filter('not:(:hidden)').each(function() { 
    alert('visible');
});

hide将样式设置为display="none"。 jQuery 1.3.2的release notes也说：

在jQuery 1.3.2中，元素是可见的如果它的浏览器报告的offsetWidth或 offsetHeight大于0。

所以我想在这种情况下:visible选择器错误地不匹配任何东西，因为根据执行的计算，行不占用任何空间，尽管他们的CSS display属性是不设置为none。相反，:hidden正确地将元素与style="display:none"匹配，因此对非:hidden元素的测试工作正常。

Answer 2

You've found a legitimate bug。它在1.3.2中被打破，但现在fixed in trunk。

According to Resig：

我们已经在寻找'tr'的情况在IE中有相同的问题

以为你想知道......

Answer 3

不确定这是否重要，但不隐藏（）设置display: none;而不是visible: hidden？意味着隐藏的行仍然可见，它只是不显示...

Answer 4

很可能你的trClass与display：none碰撞了.hide（）设置。当标签同时具有class属性和style属性时，将应用。你应该密切关注你的trClass并从中取出显示内容。

为什么我的隐藏不是真的隐藏？

4 个答案: