jQuery :nth-of-type(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)选择器

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/605015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3.4更新 “Slam Dunk“发布!!!

Announcing Vue 3.4 | The Vue Point. vue3.4更新官方文档 在vue2即将结束更新的时候&#xff0c;vue3迎来了一个重要的更新。代号为“&#x1f3c0; Slam Dunk”&#xff0c;即"灌篮高手"。这个版本进行了很多显著的内部改进&#xff0c;最重要的是模版解析的底层逻…

Github 2024-01-08开源项目周报 Top14

根据Github Trendings的统计&#xff0c;本周(2024-01-08统计)共有14个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目5TypeScript项目3C项目2Dart项目1QML项目1Go项目1Shell项目1Rust项目1JavaScript项目1C#项目1 免费…

Mockito+junit5搞定单元测试

目录 一、简介1.1 单元测试的特点1.2 Mock类框架的使用场景1.3 常见的Mock框架1.3.1 Mockito1.3.2 EasyMock1.3.3 PowerMock1.3.4 Testable1.3.5 比较 二、Mockito的使用2.1 导入pom文件2.2 mock对象和spy对象2.3 初始化mock/spy对象的方式2.4 参数匹配2.5 方法插桩2.6 InjectM…

javamail 发送邮件报错:Could not connect to SMTP host: smtp.163.com, port: 25 ,问题解决

报错内容 Exception in thread "main" javax.mail.MessagingException: Could not connect to SMTP host: smtp.163.com, port: 465, response: -1at com.sun.mail.smtp.SMTPTransport.openServer(SMTPTransport.java:1949)at com.sun.mail.smtp.SMTPTransport.prot…

IO进程线程Day5

1> 将互斥机制代码重新实现一遍 #include<myhead.h>char buf[128]; //临界资源pthread_mutex_t mutex; //创建锁资源//分支线程 void* task(void* arg) {while(1){//获取锁资源pthread_mutex_lock(&mutex);printf("这里是分支线程:%s\n",buf);st…

掌握Java并发编程:Lock、Condition与并发集合

在Java并发编程中&#xff0c;正确地处理多线程间的同步和共享资源是非常重要的。Java提供了一些并发编程的工具和类&#xff0c;其中Lock、Condition和并发集合是常用的重要组件。以下是关于它们的详细讨论&#xff1a; Lock&#xff08;锁&#xff09;&#xff1a; Lock是Jav…

ubuntu apt 更换阿里云源

简介&#xff1a;Ubuntu系统的APT&#xff08;Advanced Package Tool&#xff09;是一个包管理器&#xff0c;用于在Ubuntu上安装、卸载和更新软件包。默认情况下&#xff0c;APT会从Ubuntu官方源中下载软件包&#xff0c;但由于网络原因&#xff0c;有时候下载速度较慢。阿里云…

多线程模板应用实现(实践学习笔记)

出处&#xff1a;B站码出名企路 个人笔记&#xff1a;因为是跟着b站的教学视频以及文档初步学习&#xff0c;可能存在诸多的理解有误&#xff0c;对大家仅供借鉴&#xff0c;参考&#xff0c;然后是B站up阳哥的视频&#xff0c;我是跟着他学。大家有兴趣的可以到b站搜索。加油…

JDBC-基本概念

一、概念 引用IBM官网文档的介绍&#xff1a;Java™ database connectivity (JDBC) is the JavaSoft specification of a standard application programming interface (API) that allows Java programs to access database management systems. The JDBC API consists of a s…

CAD安装教程

CAD安装教程 目录 一&#xff0e; 下载CAD二&#xff0e; 安装CAD 一&#xff0e; 下载CAD 如果需要CAD安装包请私信。 二&#xff0e; 安装CAD 解压压缩包AutoCAD2022中文版&#xff0c;以管理员身份运行AutoCAD_2022_Simplified_Chinese_Win_64bit_dlm.sfx。 选择解压路径。…

【sklearn练习】datasets的使用

一、数据集分类 1、fetch类的数据集&#xff1a; 以 "fetch" 开头的数据集&#xff0c;这些数据集通常不包含在 scikit-learn 的标准安装中&#xff0c;需要从远程服务器上下载。这些数据集通常比标准数据集更大&#xff0c;因此在使用它们之前&#xff0c;需要通过…

Spring MVC中@ExceptionHandler注解的智能处理机制——无需显示指定异常类型

概述 在深入探讨Spring MVC框架时&#xff0c;我们经常会遇到异常处理的相关场景。其中&#xff0c;ExceptionHandler注解是一个非常重要的工具&#xff0c;它允许我们声明一个方法来专门处理特定类型的异常。有趣的是&#xff0c;Spring容器具备智能化的异常类型关联功能&…

【笔记1-4】Qt系列:使用QSetting保存画面状态

参考文献1 参考文献2 制作UI的过程中&#xff0c;会有需要保存UI画面状态的需求&#xff0c;例如&#xff0c;保存文本框的内容&#xff0c;保存勾选框的状态等&#xff0c;除了使用txt进行读写外&#xff0c;还可以使用QSetting类将UI状态保存到配置文件.ini中 QSetting的初…

自动驾驶:低阶可部署的单目测距算法-基于YOLO与透视变换

一、开发环境 部署平台&#xff1a;英伟达的Jetson Nano 环境&#xff1a;Linux ROS 语言&#xff1a;C 设备&#xff1a;1920*1080像素的摄像头、开发板。 模型&#xff1a;yolo-v8s 二、单目测距实现思路 0、标定相机和车辆&#xff08;假设已经标定完成&#xff09; 1、通…

06-微服务-SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明队列、交…

[论文阅读] Revisiting Feature Propagation and Aggregation in Polyp Segmentation

[论文地址] [代码] [MICCAI 23] Abstract 息肉的准确分割是筛查过程中有效诊断结直肠癌的关键步骤。 由于能够有效捕获多尺度上下文信息&#xff0c;普遍采用类似UNet 的编码器-解码器框架。 然而&#xff0c;两个主要限制阻碍了网络实现有效的特征传播和聚合。 首先&#xff…

基于SSM的企业员工管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

[AutoSar]基础部分 RTE 04 数据类型的定义及使用

目录 关键词平台说明一、数据类型分类二、Adt三、Idt四、Base 数据类型五、units六、compu methods七、data constraint 关键词 嵌入式、C语言、autosar、Rte 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0c;C编译器HighTec (GCC) 一、数据…

python自动化测试面试题与答案汇总

对于机器学习算法工程师而言,Python是不可或缺的语言,它的优美与简洁令人无法自拔,下面这篇文章主要给大家介绍了关于30道python自动化测试面试题与答案汇总的相关资料,需要的朋友可以参考下 1、什么项目适合做自动化测试&#xff1f; 关键字&#xff1a;不变的、重复的、规范…

编程笔记 html5cssjs 024 HTML表单元素

编程笔记 html5&css&js 024 HTML表单元素 <input> 元素 最重要的表单元素是 <input> 元素。<select> 元素&#xff08;下拉列表&#xff09;<option> 元素定义待选择的选项。<textarea> 元素<button> 元素HTML5 表单元素 表单是由…