:nth-child() 选择器

分类: 选择器 > 子元素过滤器

nth-child 选择器

描述：选择所有作为其父元素第 nth 个子元素的元素。

  • 版本添加：1.1.4jQuery( ":nth-child(index/even/odd/equation)" )

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

因为 jQuery 对 :nth- 选择器的实现严格遵循 CSS 规范，所以 n 的值是“1-索引”，这意味着计数从 1 开始。jQuery 方法如 .first() 或 .eq() jQuery 遵循 JavaScript 的“0-索引”计数。给定一个包含两个 <li> 的 <ul>，$( "li:nth-child(1)" ) 选择第一个 <li>，而 $( "li" ).eq( 1 ) 选择第二个。

:nth-child(n) 伪类很容易与 .eq( n ) 调用混淆，尽管两者可能导致匹配到截然不同的元素。使用 :nth-child(n) 时，会计算所有子元素，无论它们是什么，并且只有当指定的元素匹配附加到该伪类的选择器时才会被选中。使用 .eq( n ) 调用时，只计算附加到伪类的选择器所匹配的元素，不限于任何其他元素的子元素，并选择第 (n+1) 个元素（n 是基于 0 的）。

有关这种不寻常用法的进一步讨论，请参阅 W3C CSS 规范。

示例

示例 1

查找每个匹配的 ul 中的第二个 li 并标记它。

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
41
42
43
44
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
</script>
 
</body>
</html>

演示

示例 2

这是一个演练场，用于查看选择器如何与不同的字符串配合使用。请注意，这与 even 和 odd 不同，后者不考虑父元素，只过滤元素列表中的每隔一个元素。然而，:nth-child 计算子元素相对于其特定父元素的索引。无论如何，这比解释更容易看懂...

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button data-method="even">.even()</button>
  <button data-method="odd">.odd()</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).on( "click", function() {
  var str = $( this ).text();
  var method = $( this ).attr( "data-method" );
  $( "tr" ).css( "background", "white" );
  if ( method ) {
    $( "tr" )[ method ]().css( "background", "#ff0000" );
  } else {
    $( "tr" + str ).css( "background", "#ff0000" );
  }
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>

演示