Question

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.

Answer 1

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();
});