CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Doug Smith
Doug Smith

Reputation: 29316

Why is my :nth-child(2) selector not working in my jQuery?

I have the following jQuery:

    $(".score-window a:first-child").click(function() {
        $(".score-window").hide();
        $(".login-window").show();
    });

    $(".score-window a:nth-child(2)").click(function() {
        $(".score-window").hide();
        $(".register-window").show();
    });

Which is hooked up to the following HTML:

        <div class="score-window">
            <i class="icon-remove" title="Close"></i>
            <p>In order to view your score, you have to <a href="#">log in</a>.</p><br>
            <p>Don't have an account yet? <a href="#">Register</a>! Totally free and you'll get the ability to save your scores.</p>
        </div>

I only have two links in the score-window class, so I don't see why this isn't working.

Upvotes: 0

Views: 582

Answers (4)

BoltClock
BoltClock

Reputation: 723518

You have two links, but each one is the only child of its parent p, so they will match a:first-child only. The parent of the links is not .score-window, but p. However the parent of the p elements (along with the i and br elements) is .score-window.

You need to amend your selectors to use :nth-child() with the p elements instead, then select the a under each one. There's an i which is the first child, and a br between your two p elements which looks like it isn't needed. You should be able to remove it then do this:

$(".score-window p:nth-child(2) a").click(function() {
    $(".score-window").hide();
    $(".login-window").show();
});

$(".score-window p:nth-child(3) a").click(function() {
    $(".score-window").hide();
    $(".register-window").show();
});

If the br must stay there for whatever reason, use p:nth-child(4) or p:last-child instead for your second selector.

If you're using or can upgrade to jQuery 1.9, you can use :nth-of-type() instead to limit the count to just your p elements (i.e. the first p and the second p), but older versions of jQuery don't support it:

$(".score-window p:nth-of-type(1) a").click(function() {
    $(".score-window").hide();
    $(".login-window").show();
});

$(".score-window p:nth-of-type(2) a").click(function() {
    $(".score-window").hide();
    $(".register-window").show();
});

Upvotes: 2

Frances McMullin
Frances McMullin

Reputation: 5696

Use :eq instead, the a elements are children of score-window, just not direct ones, so your space syntax is correct. Just :eq instead, because the a elements are not first children of their direct parents (there's a text node before each), but they are first within the set you're matching. You do not need to specify the p element in the middle when matching.

$(".score-window a:eq(0)").click(function() {
    $(".score-window").hide();
    $(".login-window").show();
});

$(".score-window a:eq(1)").click(function() {
    $(".score-window").hide();
    $(".register-window").show();
});

Upvotes: 0

Ajinkya
Ajinkya

Reputation: 22710

you don't have a element inside score-window element (I mean direct child of score-window). Actually its within p.

Upvotes: 0

bipen
bipen

Reputation: 36531

what u need here is

$(".score-window p:nth-child(2) a").click(function() {...});

since a is child of <p> tag and not <div class="score-window">....

Upvotes: 0

Related Questions