Uso di: visible e: first-child insieme in jQuery

Question

Sto provando a utilizzare gli pseudo-selettori ": visible" e ": first-child" insieme in jQuery e sembra non funzionare. Ho il seguente codice HTML:

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

E la seguente chiamata jQuery:

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

Ma non sembra mai trovare l'elemento giusto ... che trova il primo elemento, ma non il primo visibile elemento. Ho persino provato a scambiare l'ordine di selezione ": first-child: visible" invece di ": visible: first-child" e anche questo non funziona. Qualche idea?

Answer 1

vostro selettore solo

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

partite del Un elemento solo quando è il primo figlio del DIV genitore e quando è visibile.

Se si desidera ottenere il primo visibile Un elemento, è necessario utilizzare il .eq function

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

o :first pseudo-class

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

Answer 2

io non sono sicuro perché :visible:first-child non funziona, ma si può provare

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

Answer 3

Per quanto ne so il selettore pseudo-classe: first-child corrisponderà solo il primo bambino mai. Non può essere ulteriormente specificato aggiungendo una pseudo-classe che deve essere anche visibile. Potresti provare a scrivere

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

invece di usare la corretta pseudo-classe css. JQuery documentation for :first

Answer 4

Si potrebbe desiderare di provare $("div a.action:visible(:first-child)) come selettore, che è il modo in cui jQuery specifica l'utilizzo di più selettori psuedo nella sua documentazione API.