在jQuery中使用：visible和：first-child

Question

我正在尝试在jQuery中一起使用“：visible”和“：first-child”伪选择器，但它似乎没有成功。我有以下HTML：

<div>
    <a class="action" style="display:none;">Item One</a>
    <a class="action">Item One</a>
    <a class="action">Item One</a>
</div>

以下jQuery调用：

$("div a.action:visible:first-child").addClass("first");

但它似乎永远找不到合适的元素......它找到第一个元素但不是第一个可见元素。我甚至尝试交换选择器顺序“：first-child：visible”而不是“：visible：first-child”，这也不起作用。有什么想法吗？

Answer 1

您的选择器

$("div a.action:visible:first-child").addClass("first");

仅当 A 元素是父DIV的第一个子元素并且它可见时，它才匹配 A 元素。

如果您想获得第一个可见的 A 元素，则应使用.eq function

$("div a.action:visible").eq(0).addClass("first");

或:first pseudo-class

$("div a.action:visible:first").addClass("first");

Answer 2

我不确定为什么:visible:first-child无效，但您可以尝试

$("div a.action:visible").eq(0).addClass("first");

Answer 3

据我所知，伪类选择器：first-child只匹配第一个孩子。它不能通过添加一个必须也可见的伪类来进一步指定。你可能想尝试写

$("div a.action:visible:first").addClass("first");

而不是使用正确的css伪类。 JQuery documentation for :first

Answer 4

您可能希望尝试$( "div a.action:visible(:first-child))作为您的选择器，这就是jQuery在其API文档中使用多个伪选择器指定的方式。