Uso de: visible y: primer hijo juntos en jQuery

Question

Estoy tratando de usar los pseudo-selectores ": visible" y ": primer hijo" juntos en jQuery y parece que no funciona. Tengo el siguiente código HTML:

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

Y la siguiente llamada jQuery:

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

Pero nunca parece encontrar el elemento correcto ... que encuentra el primer elemento pero no la primera visibles elemento. Incluso he intentado cambiar el orden de selector ": primer hijo: visible" en lugar de ": visible: primer hijo" y eso tampoco funciona. ¿Algunas ideas?

Answer 1

Su selector de

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

partidos sólo el Un elemento sólo cuando es el primer hijo de la matriz DIV y cuando es visible.

Si desea obtener la primera visibles Un elemento, se debe utilizar el .eq function

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

o la :first pseudo-class

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

Answer 2

no estoy seguro de por qué :visible:first-child no está funcionando, pero se puede tratar

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

Answer 3

Por lo que yo sé el selector de pseudo-clase: first-child sólo igualará el primer hijo nunca. No se puede especificar añadiendo una pseudoclase que también debe ser visible. Puede intentar escribir

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

en lugar de utilizar la pseudoclase css adecuada. JQuery documentation for :first

Answer 4

Es posible que desee probar $("div a.action:visible(:first-child)) como su selector, que es cómo jQuery especifica el uso de múltiples selectores de psuedo en su documentación API.