jquery - 在 CSS 中查找第一个可见的表格行

Question

如果我有这样的表格布局：

<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>

找到第一个显示行的最简单方法是什么？我这样说是因为某些行类可能将“显示：无”设置为过滤过程的一部分。

我以为：

tr:first-child

会起作用，但事实证明隐藏行时不起作用！

Answer 1

如果你可以使用jQuery它很简单：

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

没有javascript，您将无法做到这一点。

如果速度对您来说非常重要，这会更快一些：

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

文件：

因为 :visible 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :visible 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :visible 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":visible")。