:nth-of-type() 选择器

类别：选择器 > 子元素筛选器

nth-of-type selector

描述：选择所有的属于它们的父元素中的第n个子元素的元素，相对于具有相同元素名的同辈元素。

  • 增补版本：1.9jQuery( ":nth-of-type(index/even/odd/equation)" )

    index: 要匹配的每个子元素的索引，从1开始，字符串even或odd，或一个方程（例如，:nth-of-type(even)、:nth-of-type(4n)）

因为:nth-选择器的jQuery实现器严格派生自CSS规范文档，所以n的值是从1开始的索引，意味着计数从1开始。对于其他选择器表达式，譬如:eq()或:even，jQuery遵守JavaScript的从0开始的索引计数。

W3C CSS specification中可以找到关于这种用法的进一步讨论。

示例：

找到每个相对于它的同辈<span>是第二个的<span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type demo</title>
  <style>
  .nth {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>
 
<script>
$( "span:nth-of-type(2)" )
  .append( "<span> is 2nd sibling span</span>" )
  .addClass( "nth" );
</script>
 
</body>
</html>

演示：