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.