为什么我的：nth-child（2）选择器不能在我的jQuery中工作？

我有以下的jQuery：为什么我的：nth-child（2）选择器不能在我的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类两个环节，所以我不明白为什么这ISN没有工作。

来源

2013-02-15 Doug Smith

请注意，'n-type-type'可能在这里更有用，因为第一个孩子是'i'而不是'p'。 – 2013-02-15 13:02:45

您有两个链接，但每个链接都是其父项p的唯一子项，因此它们只会匹配a:first-child。链接的父项不是.score-window，而是p。然而，p元素的母体（以及i和br元素）是.score-window。

您需要修改选择器，使用:nth-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必须呆在那里，无论出于何种原因，使用p:nth-child(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(); 
});

来源

2013-02-15 13:01:19 BoltClock

请注意，在这里'n-type-type'可能更有用，因为第一个孩子是'i'而不是'p'。 – 2013-02-15 13:02:24

@Bram Vanroy：没错，虽然它确实带来了潜在的折衷。我编辑了我的答案。 – BoltClock 2013-02-15 13:07:43

即使我复制并粘贴您的第一个解决方案，第二个链接仍然不起作用。 – 2013-02-15 13:20:39

你没有a元素里面score-window元素（我的意思是直接子score-window）。其实它在p之内。

来源

2013-02-15 12:59:39 xyz

我怎么样？我有一个用于登录链接，一个用于注册链接。 – 2013-02-15 13:00:17

为什么倒票？他其实是对的！（upvote）没有'a'，它是'score-window'的直接子节点。 – 2013-02-15 13:03:42

它仍然是'.score-window'的后代，它由单词“inside”暗示。它措辞很差。 – BoltClock 2013-02-15 13:05:56

什么u需要在这里

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

因为a是<p>标签的孩子，而不是<div class="score-window"> ....

来源

2013-02-15 13:02:10 bipen

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

来源

2013-02-15 13:21:51

为什么我的：nth-​​child（2）选择器不能在我的jQuery中工作？

回答

相关问题

为什么我的：nth-child（2）选择器不能在我的jQuery中工作？