为什么隐藏的<tr>没有真正隐藏？

Question

我有这个从经典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')}); 它显示输出'可见'两次.

为什么是这样？

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

有任何想法吗？

/丹尼尔

Answer 1

该:visible选择不测试的display样式属性,要使用:hidden替代,在1.3.2版本注释说:

...如果元素的CSS显示为"none",或者其父/祖先元素的任何显示为"none",或者元素的宽度为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选择器错误地不匹配任何东西,因为根据执行的计算,行不占用任何空间,尽管它们的CSS display属性未设置为none.相反,:hidden正确匹配元素与style="display:none"非:hidden元素的测试工作正常.