Using :visible and :first-child together in jQuery

Question

I'm trying to use the ":visible" and ":first-child" pseudo-selectors together in jQuery and it doesn't seem to be working out. I have the following HTML:

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

And the following jQuery call:

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

But it never seems to find the right element...it finds the first element but not the first visible element. I've even tried swapping the selector order ":first-child:visible" instead of ":visible:first-child" and that doesn't work either. Any ideas?

Answer 1

Your selector

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

matches only the A element only when it's the first-child of the parent DIV and when it is visible.

If you want to get the first visible A element, you should use the .eq function

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

or the :first pseudo-class

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

Answer 2

I'm not sure why :visible:first-child isn't working, but you can try

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