在 CSS 中查找第一个可见的表格行答案

【问题标题】：Find first visible table row in CSS在 CSS 中查找第一个可见的表格行
【发布时间】：2012-07-03 00:13:09
【问题描述】：

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

<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

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

【问题讨论】：

您需要为此使用 javascript。
每次我过滤时，调用检查第一行显示？

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

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

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

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

如果速度对你来说很重要，那就快一点：

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

文档：

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

【讨论】：