为什么我的隐藏< tr>真的不隐藏吗? [英] Why is my hidden <tr> not really hidden?

问题描述

我有一个从经典asp生成的简单html标记:

I have this simple html markup generated from classic asp:

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

如果我使用Jquery将属于Hello的tr设置为hide()，它将隐藏.好！

If i set the tr belonging to Hello to hide() using Jquery it hides. Good!

但是，当我使用此$('.trClass:visible').each(function(){alert('visible')});时， 它会两次显示可见"输出.

But, when i use this $('.trClass:visible').each(function() { alert('visible') }); it shows the output 'visible' twice.

这是为什么?

我的问题是，即时通讯会过滤带有选择框的列上的表格.但是在过滤之后，我需要对表中可见的那些行执行一些计算，但是我现在就获得了所有行.

My problem here is that im filtering a table on a column with a selection box. But after filtering i need to perform some calculations on those rows that are visible in the table, but i get all rows right now.

有什么想法吗?

/丹尼尔

推荐答案

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

The :visible selector does not test the display style property, you want to use :hidden instead, the 1.3.2 release notes say:

...如果您元素的CSS显示为 无"或其任何父/祖先 元素的显示为无"，或者 元素的宽度为0，而元素的 如果height为0，则元素为 报告为隐藏.

...if your element's CSS display is "none", or any of its parent/ancestor element's display is "none", or if the element's width is 0 and the element's height is 0 then an element will be reported as hidden.

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

These will correctly select your visible rows:

$('.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的发行说明还说:

hide sets the style to display="none". The release notes for jQuery 1.3.2 also say:

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

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

所以我猜在这种情况下，:visible选择器没有匹配任何内容，因为根据行的计算，尽管它们的CSS display属性不是，但这些行并没有占用任何空间设置为none.相反，:hidden可以正确地将元素与style="display:none"匹配，因此对非:hidden元素进行测试就可以了.

so I guess in this case the :visible selector is erroneously not matching anything because the rows are not occupying any space according to the calculations performed, despite the fact that their CSS display property is not set to none. Conversely, :hidden correctly matches elements with style="display:none" so testing for non :hidden elements works just fine.

这篇关于为什么我的隐藏< tr>真的不隐藏吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！