jquery怎么获取前几个同级元素

梦瑶小哥_9079

梦瑶小哥_9079

2022-05-17

3072人浏览

原创

3种方法:1、用prev(),获取前一个同级元素,语法“元素.prev()”;2、用prevAll(),可获取前面的所有同级元素,语法“元素.prevAll()”;3、用prevUntil(),语法“元素.prevUntil(stop)”。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery获取前几个同级元素的3种方法

  • prev()方法,主要用于获得指定元素的上一级同级元素

  • prevAll()方法,主要用于获得指定元素上一级所有的同级元素

  • prevUntil()方法,主要用于获得指定元素的上一个同级元素,这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素

    该方法返回两个给定参数之间的每个元素之前的所有同级元素

1、使用prev()方法

prev() 方法返回被选元素的前一个同级元素。

注:该方法只返回一个元素。

语法:

$(selector).prev(filter)
参数 描述
filter 可选。规定缩小搜索前一个同级元素范围的选择器表达式。

示例:返回带有类名 "start" 的

  • 元素的前一个同级元素
    html>
    
    
    	
    		<meta><script></script><style>
    		.siblings *{ 
    			display: block;
    			border: 2px solid lightgrey;
    			color: lightgrey;
    			padding: 5px;
    			margin: 15px;
    		}
    		</style><script>
    		$(document).ready(function(){
    			$("li.start").prev().css({"color":"red","border":"2px solid red"});
    		});
    		</script><div>
    			<ul>ul (父节点)  
    				<li>li (兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>   
    		</div>
    		
    		
    		

    1.png

    jQuery 1.12.4
    jQuery 1.12.4

    jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本,由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用,尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

    下载

    2、使用prevAll()方法

    prevAll() 方法返回被选元素之前的所有同级元素。

    语法:

    $(selector).prevAll(filter)
    参数 描述
    filter 可选。规定缩小搜索元素之前的同级元素范围的选择器表达式。

    注意:如需返回多个同级元素,请使用逗号分隔每个表达式。

    示例:返回带有类名 "start" 的

  • 元素之前的所有同级元素:
    html>
    
    
    	
    		<meta><script></script><style>
    			.siblings * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style><script>
    			$(document).ready(function() {
    				$("li.start").prevAll().css({
    					"color": "red",
    					"border": "2px solid red"
    				});
    			});
    		</script><div>
    			<ul>ul (parent)
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>
    </div>
    
    	
    

    2.png

    3、使用prevUntil()方法

    prevUntil() 方法返回 selector 与 stop 之间的每个元素之前的所有同级元素。

    $(selector).prevUntil(stop,filter)
    参数 描述
    stop 可选。表示在哪里停止搜索元素之前匹配的同级元素的选择器表达式、元素、jQuery 对象。
    filter 可选。规定缩小搜索介于 selector 与 stop 之间的同级元素范围的选择器表达式。

    注意:如需返回多个同级元素,请使用逗号分隔每个表达式。

    示例:返回在类名为 "start" 和 "stop" 的两个

  • 元素之间的所有同级元素
    html>
    
    
    	
    		<meta><script></script><style>
    			.siblings * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style><script>
    			$(document).ready(function() {
    				$("li.start").prevUntil("li.stop").css({
    					"color": "red",
    					"border": "2px solid red"
    				});
    			});
    		</script><div>
    			<ul>ul (父节点)
    				<li>li (类名为"stop"的兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>
    </div>
    
    	
    

    3.png

    【推荐学习:jQuery视频教程、web前端视频】

  • 相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    jquery

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    DBeaver怎么导入数据
    DBeaver怎么导入数据

    DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

    2026.11.05

    0

    12

    DBeaver安全防护教程大全
    DBeaver安全防护教程大全

    DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

    2026.11.05

    0

    12

    DBeaver连接创建与配置教程
    DBeaver连接创建与配置教程

    本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

    2026.11.04

    0

    16

    XORM框架结构体映射与表结构同步
    XORM框架结构体映射与表结构同步

    本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

    2026.11.04

    0

    15

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    15

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    16

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    16

    XORM框架零基础入门教程
    XORM框架零基础入门教程

    本专题梳理XORM框架的入门路径,从框架定位、依赖安装、连接数据库到跑通第一个增删改查示例,讲清Engine初始化、日志开启与项目目录规划,并对比GORM等同类ORM的差异,帮助Go开发者建立整体认知。

    2026.11.04

    0

    15

    Docker Desktop怎么设置端口映射
    Docker Desktop怎么设置端口映射

    本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

    2026.11.03

    20

    18

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery官方API文档
    jQuery官方API文档

    共0课时 | 0人学习

    jQuery 教程
    jQuery 教程

    共42课时 | 16.7万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 19.5万人学习