使用jQuery获取第一个可见元素

尝试使用jQuery的

：first

和

：visible

伪选择器获取列表的第一个可见元素，如下所示：但它不起作用：

小提琴：

HTML:

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>
<ul>
    <li style="display:none;">Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

$('li:visible:first').css('background','blue');

每个列表中的第一项应变为蓝色…

尝试使用以下方法：

$('ul').find('li:visible:first').css('background','blue');

目前，您的代码只是获取页面上第一个可见的

li

元素并设置背景颜色。此代码选择所有

ul

元素，然后在每个元素中查找第一个可见的

li

，并应用样式

---

它在这里工作：

使用这个怎么样：

li:visible:not(:visible ~ :visible)

---

它似乎工作得很好。。。A项的背景资料如下：changed@Arun-如果它在工作，那么第一个列表中的项目A和第二个列表中的项目B的背景会发生奇怪的变化，使用

$（'ul-li:visible:first'）

仍然不起作用：（虽然使用

$（'ul'）。find（'li:visible:first'）

）@Yarin-这将是因为它仍然只是在

ul

中搜索第一个可见的

li

。

.find（）

工作的原因是它在每个匹配元素中找到给定的选择器（在本例中为

ul

s）。@Joe-明白了。谢谢你的解释，谢谢亚林。这是我的错误，我没有放入find。它匹配第一个可见列表项，只要它前面没有另一个可见项。它确保它是第一个可见项，而不仅仅是任何可见项。

li:visible:not(:visible ~ :visible)