在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"); 

比赛的只有当它的父DIV的第一个孩子，当它是可见元素。

如果你想获得第一个可见一个元素，你应该使用.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

据我所知道的伪类选择：第一，孩子只能将永远匹配的第一个孩子。不能通过添加一个伪类来进一步指定它，它也必须是可见的。您可能想尝试编写

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

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

Answer 4

你可能想尝试$("div a.action:visible(:first-child))为您的选择，那是jQuery如何在其API文档中使用多个伪选择器指定的。