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

Question

尝试使用jQuery的:first和:visible伪选择器获取列表中第一个可见元素，如此处所建议：https://dev59.com/0kfRa4cB1Zd3GeqP9XpZ#830611，但是它并不能正常工作： Fiddle: http://jsfiddle.net/FAY9q/4/ 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>

JQUERY：

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

每个列表中的第一项应该变成蓝色...

- Yarin

---

看起来运行良好...项目A的背景已更改 - Arun P Johny

@Arun- 如果它正在工作，那么第一个列表中的项目A和第二个列表中的项目B的背景将会改变。 - Yarin

Answer 1

试试使用这个：

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

目前你的代码只是获取页面上第一个可见的 li 元素并设置其背景颜色。这段代码选择所有的 ul 元素，然后在每个元素中找到第一个可见的 li 并应用样式。

这里演示了它的工作原理：http://jsfiddle.net/FAY9q/5/

- Joe

---

然而奇怪的是，使用 $('ul li:visible:first') 仍然不起作用：http://jsfiddle.net/FAY9q/7/ （但是当您使用 $('ul').find('li:visible:first') 时它可以工作） - Yarin

@Yarin - 这是因为它仍然只在ul中搜索第一个可见的li。.find()之所以有效是因为它在匹配元素（在这种情况下为ul）的每个元素中查找给定选择器。 - Joe

Answer 2

使用这个怎么样：

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

- jbramble76

---

只要它前面没有其他可见项目，它就匹配第一个可见列表项。它确保它是第一个可见项目，而不仅仅是任何可见项目。 - nemo

Answer 3

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

- Pranay Bhardwaj

---

谢谢Yarin。是我犯了错误，我没有加上find。 - Pranay Bhardwaj