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

发布于 2024-08-06 21:38:05 字数 497 浏览 3 评论 0原文

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

这是为什么呢？

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

有什么想法吗？

/丹尼尔

原文

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>

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

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

Why is this?

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.

Any ideas?

/Daniel

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2024-08-13 21:38:05

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

...如果您的元素的 CSS 显示是
“无”，或其任何父母/祖先
元素的显示为“none”，或者如果
元素的宽度为 0，元素的宽度为 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 元素的测试效果很好。

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

...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'); 
});

or:

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

or:

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

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

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

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.

回复收藏 0 原文