爲什麼我的：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中工作？