:nth-of-type(index/even/odd/equation)

选择标签名相同的的第n个同级兄弟元素。

jQuery(":nth-of-type(index/even/odd/equation)")

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

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

注：

: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元素中的第二个元素。

<!DOCTYPE html>
<html>
<head>
  <style>
.nth { color: red; }
</style>
  <script src="./static/js/jquery-3.5.0.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>

返回jQuery导航

:nth-of-type(index/even/odd/equation)

注：

例子