jQuery :nth-of-type(n)选择器的用法详解

简介: jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如

:nth-of-type(n)选择器语法

$('selector:nth-of-type(n)')

:nth-of-type(n)选择器语法解析

jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如父元素有3个子元素,分别是p、span和p,那么:nth-of-type(2)选择到的是第二个p元素,而不是第二个子元素。具体的可参考下方实例代码。

重点提示:如果是selector是一个class选择器,那么:nth-of-type(n)匹配选择的必须是class相同且元素类型也一致的所有元素中的第n个元素!具体可参考下方的实例代码。

:nth-of-type(n)选择器实例代码

如下实例代码,通过类class属性值为c的选择器匹配选择元素,这些元素指向的父元素为一个div元素,然后通过:nth-of-type(1)选择器选择该div中第一个类型class为c的子元素,因为下方实例中,class为c的div和class为c的段落p都是各自div和p元素集合中的第一个元素,因此都会被选择:

<div>
  <div class="c">div</div>
  <span>span</span>
  <p class="c">段落</p>
</div>

<button id="nthoftype" class="btn">jQuery</button>

<script>
  $('#nthoftype').click(function(){
    
    $('.c:nth-of-type(2)').css("font-size","2.3em");
  })
</script>

原文jQuery :nth-of-type(n)选择器
:nth-of-type(n)选择器语法

免责声明:内容仅供参考,不保证正确性!

相关文章
N..
|
26天前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
|
3月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
26 2
|
30天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
30天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
30天前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
13 0
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
8 0
|
1月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
9 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
44 0
|
3月前
|
JavaScript 前端开发 UED
简约优雅的 jQuery 选择器
简约优雅的 jQuery 选择器
18 0