为什么我的:nth-​​child(2)选择器不能在我的jQuery中工作?

时间:2013-02-15 12:57:13

标签: javascript jquery html jquery-selectors

我有以下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();
    });

其中包含以下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>

我在score-window课程中只有两个链接,所以我不明白为什么这不起作用。

4 个答案:

答案 0 :(得分:2)

您有两个链接,但每个链接都是其父级p的唯一子级,因此它们仅匹配a:first-child。链接的父级不是.score-window,而是p。但是,p元素的父级(以及ibr元素) .score-window

您需要修改选择器以使用:nth-child()替换p元素,然后选择每个元素下的a。有一个i是第一个孩子,而br个元素之间的p似乎不需要它们。您应该能够将其删除然后执行此操作:

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

如果br因任何原因必须留在那里,请使用p:nth-child(4)p:last-child代替您的第二个选择器。

如果您正在使用或可以升级到jQuery 1.9,则可以使用:nth-of-type()来将计数限制为仅p元素(即第一个p和第二个p元素{1}}),但旧版本的jQuery不支持它:

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

答案 1 :(得分:0)

a元素中没有score-window元素(我的意思是score-window的直接子元素)。实际上它在p内。

答案 2 :(得分:0)

你需要的是

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

因为a<p>代码的子代,而不是<div class="score-window"> ....

答案 3 :(得分:0)

使用:eq相反,a元素是得分窗口的子元素,而不是直接元素,因此您的空间语法是正确的。只是:eq相反,因为a元素是不是他们直接父母的第一个孩子(每个孩子都有一个文本节点),但它们首先在你匹配的集合中。在匹配时,需要在中间指定p元素。

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