Usando: visible y: primer hijo juntos en jQuery

Estoy tratando de usar los pseudo-selectores “: visible” y “: primer hijo” juntos en jQuery y no parece estar funcionando. Tengo el siguiente HTML:

 

Y la siguiente llamada jQuery:

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

Pero nunca parece encontrar el elemento correcto … encuentra el primer elemento pero no el primer elemento visible . Incluso he intentado cambiar el orden de selección “: first-child: visible” en lugar de “: visible: first-child” y eso tampoco funciona. ¿Algunas ideas?

Su selector

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

coincide solo con el elemento A solo cuando es el primer hijo del DIV principal y cuando está visible.

Si desea obtener el primer elemento A visible, debe usar la función .eq

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

o la : primera pseudo-clase

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

No estoy seguro de por qué :visible:first-child no está funcionando, pero puedes intentarlo

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

Por lo que sé, el selector de pseudo-clase: primer hijo solo coincidirá con el primer hijo de la historia. No se puede especificar más agregando una pseudo-clase que también debe ser visible. Es posible que desee intentar escribir

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

En lugar de utilizar la pseudo-clase css adecuada. Documentación de JQuery para: primero

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