在CSS中查找第一个可见的表行 [英] Find first visible table row in CSS

问题描述

如果我有一个表格布局如下：

If I have a table layout like so:

<table>
  <tr class="one">
    <td>
      ...
    </td>
  </tr>
  <tr class="two">
    <td>
      ...
    </td>
  </tr>
  <tr class="three">
    <td>
      ...
    </td>
  </tr>
  <tr class="four">
    <td>
      ...
    </td>
  </tr>
</table>

找到第一个显示行的最简单方法是什么？我说这是一些行类可能有display：none设置为过滤过程的一部分。

What is the easiest way to find the first showing row? I say this as some of the rows classes may have "display: none" set as part of a filtering process.

我认为：

tr:first-child

Would work but it turns out it doesn't when hiding rows!

推荐答案

如果你可以使用 jQuery 它只是：

If you can use jQuery it's simply:

$('tr:visible:first').foo();

不能在没有javascript的情况下执行。

You can't do it without javascript.

如果速度对您非常重要，那么速度会更快：

If speed is very important to you, this is a bit faster:

$('tr').filter(':visible').first().foo();

文件：

因为：visible是一个jQuery扩展而不是CSS规范的一部分，查询使用：visible不能利用本机DOM提供的性能提升 querySelectorAll ） 方法。要使用：visible to select elements，首先使用纯CSS选择器选择元素，然后使用.filter（：visible）来实现最佳性能。

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

这篇关于在CSS中查找第一个可见的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！