Question

我目前在理解jQuery中的第n个子选择器方面遇到了一些麻烦。

我有一个定义如下的列表：

<ul class="nopadding nomargin" role="tablist">
  <li class="application inline" role="tab">
  <li id="tabHome" class="inline active" role="tab">
  <li id="tabSendReceive" class="inline" role="tab">
  <li id="tabFolder" class="inline" role="tab">
  <li id="tabView" class="inline" role="tab">
</ul>

您会注意到第一个LI元素有一个应用程序类，而其他元素则没有。现在，我正在编写一个API，它应该能够根据索引选择一个tab元素。

这是它的jQuery代码：

EnableTabIndex : function(tabIndex) {
  console.log($("li[role=tab]:not(.application):nth-child(" + tabIndex + ")").attr("id"));
}

我在这里只是使用console.log进行测试。至于我对jQuery的了解，它应该采用匹配的第n个元素：

现在，由于一些奇怪的原因，当我作为tabIndex 2传递时，结果是TabHome（第一个制表符元素）。

我不明白为什么它是第二个。

我可以理解0或1（取决于jQuery从-0或1开始的值），但它不应该是2。

有人可以解释一下为什么会这样吗？

Answer 1

您需要.eq()，而不是.nth-child()。为什么？因为作为nth-child() docs状态，它们基于CSS nth-child规则，并且这些规则仅适用于元素，而不适用于元素类：

因为jQuery的:nth-选择器的实现是严格派生的   从CSS规范来看，n的值是“1索引”，意思是   计数从1开始。对于其他选择器表达式，例如   :eq()或:even jQuery遵循JavaScript的“0索引”计数。特定   一个<ul>包含两个<li> s，$（“li：nth-child（1）”）选择   第一个<li>而$（“li：eq（1）”）选择第二个。

:nth-child(n)伪类很容易与:eq(n)混淆，甚至   虽然这两者可以导致显着不同的匹配元素。    :nth-child(n)，所有孩子都被计算在内，无论他们是什么   是，只有在匹配时才选择指定的元素   选择器附加到伪类。仅使用:eq(n)选择器   附属于伪类计算，不限于儿童   选择任何其他元素，(n+1)th一个（n从0开始）。

所以：

console.log($("li[role=tab]:not('.application'):eq(2)").attr("id"));

会让你tabFolder，索引为2的元素（从零开始），在你使用的角色和:not过滤器上消失。

Answer 2

那是因为nth-child并不关心选择器的其余部分。如果它是第n个孩子，它将查看选择器的其余部分。它不是与选择器匹配的第n个孩子。

也就是说，要匹配nth-child(1)，元素必须是父元素的第一个子元素，而不是匹配查询其余部分的第一个子元素。

例如（http://jsfiddle.net/UQrze/）

<ul>
  <li class="a ">Test</li>
  <li class="a b">Test</li>
  <li class="a b">Test</li>
</ul>

/* Does not match because the first child doesn't contain a class of b */
li.b:nth-child(1) {
    color: red;    
}

/* Works since the second child does have the class of b */
li.b:nth-child(2) {
    color: red;    
}

li.b:nth-child(3) {
    color: red;    
}

Answer 3

:nth-child选择器会计算所有子项，而不管选择器的其他功能如何。如documentation中所述：

：nth-child（n）伪类很容易与：eq（n）混淆，即使这两者可能会导致匹配元素显着不同。使用：nth-child（n）时，无论它们是什么，都会对所有子项进行计数，并且只有在与附加到伪类的选择器匹配时才选择指定的元素。使用：eq（n）时，只计算附加到伪类的选择器，不限于任何其他元素的子元素，以及第（n + 1）个元素（n基于0）被选中。

换句话说，SELECTOR:eq(n)表示：

找到与SELECTOR匹配的所有元素，并选择第N个（从零开始）。

但SELECTOR:nth-child(n)表示：

查找作为其父级的第N个子级的所有元素（从1开始），并选择也与SELECTOR匹配的元素。

试图理解jQuery nth-child

3 个答案: