:nth-of-type() Selector


html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲

nth-of-type selector

描述: 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。(感谢@caikan提供的翻译)

  • 添加的版本: 1.9jQuery( ":nth-of-type(index/even/odd/equation)" )

    index: 每个相匹配子元素的索引值,从1开始,也可以是字符串 evenodd,或一个方程式( 例如 :nth-of-type(even), :nth-of-type(4n))。

因为jQuery的实现:nth-是严格来自CSS规范,n值是“1-indexed”,也就是说,从1开始计数。对于所有其他选择器表达式比如:eq():even ,jQuery遵循JavaScript的“0索引”的计数。

这个不寻常的用法,可进一步讨论中找到W3C CSS specification.

愚人码头注:

:nth-of-type()选择器是jQuery 1.9新增的选择器,它是遵循CSS 3中结构性伪类选择符 E:nth-of-type(n)实现的。和CSS 3中结构性伪类选择符 E:nth-of-type(n)一样,它选择的是匹配所有父元素下同类型中的第n个同级兄弟元素E。

:nth-of-type()选择器和 :nth-child()选择器很容易混淆,至少我是这么认为的。看下面一个例子:

<div class="test">
<p>A元素</p>
<div>B元素</div>
<p>C元素</p>
<p>D元素</p>
</div>

看下面的代码

$("p:nth-of-type(2)")//选择的是C元素
$("p:nth-child(2)")//什么元素也没选中

两者比较:

  • 这里p:nth-of-type(2)选择器选择父元素的第二个段落p元素 ,它不管段落p元素在什么位置,段落p元素可能是该父级元素的第3个或者第5个,也可以是第n个子元素,这里n肯定大于2,只要父级元素<div class="test">有两个以上的段落p子元素,他就肯定能选择到第二个段落p元素。
  • 这里p:nth-child(2)选择器选择不到任何元素,p:nth-child(2)选择器要满足的条件是:
    • 1、是一个段落p元素;
    • 2、是父元素的第二个子元素
    上述的HTML结构中,<div class="test">的第二个子元素是div元素,而不是p元素,所以不满足条件,这样就选择不到任何元素

例子:

查找每个span,这个 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
<!DOCTYPE html>
<html>
<head>
<style>
.nth { color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>

Demo: