5

我有这个从经典 asp 生成的简单 html 标记：

<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') }); 它显示输出“可见”两次。

为什么是这样？

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

有任何想法吗？

/丹尼尔

4

4 回答 4

13

选择:visible器不测试display样式属性，您想:hidden改用，1.3.2 发行说明说：

...如果您的元素的 CSS 显示为“无”，或者其任何父/祖先元素的显示为“无”，或者如果元素的宽度为 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的发行说明还说：

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

所以我猜在这种情况下，:visible选择器错误地不匹配任何东西，因为根据执行的计算，行没有占用任何空间，尽管它们的 CSSdisplay属性未设置为none. 相反，:hidden正确匹配元素，style="display:none"因此对非:hidden元素的测试工作得很好。

于 2009-09-28T11:15:45.777 回答
4

您发现了一个合法的错误。它在 1.3.2 中已损坏，但现在已修复在 trunk 中。

根据 Resig：

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

以为你想知道...

于 2009-09-28T14:21:58.733 回答
2

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

于 2009-09-28T11:16:59.270 回答
0

很可能您的 trClass 与显示冲突：没有 .hide() 设置。当标签同时具有 class 属性和 style 属性时，只会应用 on。你应该仔细检查你的 trClass 并从中取出 display: 东西。

于 2009-09-28T14:01:55.260 回答