: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)
选择器要满足的条件是:- 是一个段落p元素;
- 是父元素的第二个子元素
上述的HTML结构中,
<div class="test">
的第二个子元素是div元素,而不是p元素,所以不满足条件,这样就选择不到任何元素
例子
查找每个span,这个 span 是其所有兄弟span元素中的第二个元素。
<!DOCTYPE html> <html> <head> <style> .nth { color: red; } </style> <script src="https://www.lanmper.cn/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>