Javascript 为什么我的：n个子（2）选择器在jQuery中不起作用？

我有以下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>

要查看您的分数，您必须。


还没有账户！完全免费，您可以保存您的分数

---

我在

评分窗口

类中只有两个链接，所以我不明白为什么这不起作用。

您在

评分窗口

元素中没有

元素（我是指
评分窗口
的直接子元素）。实际上，它在
p
中，您有两个链接，但每个链接都是其父级
p
的唯一子级，因此它们将只匹配
a:first child
。链接的父项不是
.score window
，而是
p
。但是
p
元素（连同
i
和
br
元素）的父元素是
.score window

您需要修改选择器，将
：n-child（）
与
p
元素一起使用，然后在每个元素下选择
a
。第一个子元素是
i
，两个
p
元素之间有一个
br
，看起来不需要。您应该能够删除它，然后执行以下操作：

$(".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
必须留在那里，请使用第四个子项（4）

或

p:last child

作为第二个选择器

如果您正在使用或可以升级到jQuery 1.9，则可以使用

：nth-of-type（）

将计数限制为仅包含

p

元素（即第一个

p

和第二个

p

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

你需要的是

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

---

由于

a

是

标记的子元素，而不是

…

使用：eq，因此

a

元素是score窗口的子元素，而不是直接元素，因此空格语法是正确的。Just: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();
});

---

我怎么不呢？我有一个用于登录链接，一个用于注册链接。为什么投票失败？他实际上是对的！（向上投票）没有一个

a

是

score window

的直接子项。它仍然是

.score window

的后代，由单词“inside”表示。它的措词非常糟糕。直接子项的选择就像

$（“#id>a”）

一样，当你编写

$（“#id a”）

时，

\id

块中的所有

a

都被选中。请注意，

n类型的
在这里可能更有用，因为第一个子项是
i
，而不是
p
@Bram Vanroy:True，尽管它确实带来了一个潜在的权衡。我已经编辑了我的答案。第二个链接仍然不起作用，即使我复制并粘贴了你的第一个解决方案。@Doug Smith:我刚刚注意到有一个
br
将你的两个
p
分开，我不确定是否需要该元素。我扩展了这一部分。br用于格式化（我想在段落之间再加一行），但我将3改为4，现在可以使用了，谢谢。）请注意，
nth类型
在这里可能更有用，因为第一个子项是
i
，而不是
p
。