0

0

jquery怎么实现元素遍历

青灯夜游

青灯夜游

发布时间:2022-05-30 15:00:45

|

4780人浏览过

|

来源于php中文网

原创

实现元素遍历的方法:1、children(),可返回被选元素的所有直接子元素;2、closest(),可返回被选元素的第一个祖先元素;3、each(),为每个匹配元素执行函数;4、filter(),可过滤指定元素;5、nextAll()等。

jquery怎么实现元素遍历

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

jquery提供了多种遍历元素的方法

方法 描述
add() 把元素添加到匹配元素的集合中
addBack() 把之前的元素集添加到当前集合中
children() 返回被选元素的所有直接子元素
closest() 返回被选元素的第一个祖先元素
contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
each() 为每个匹配元素执行函数
end() 结束当前链中最近的一次筛选操作,并把匹配元素集合返回到前一次的状态
eq() 返回带有被选元素的指定索引号的元素
filter() 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find() 返回被选元素的后代元素
first() 返回被选元素的第一个元素
has() 返回拥有一个或多个元素在其内的所有元素
is() 根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true
last() 返回被选元素的最后一个元素
map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素
not() 从匹配元素集合中移除元素
offsetParent() 返回第一个定位的父元素
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 返回介于两个给定参数之间的所有祖先元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings() 返回被选元素的所有同级元素
slice() 把匹配元素集合缩减为指定范围的子集

其中,用于遍历子元素的有两个:

  • children()方法:获取该元素下的直接子集元素

  • find()方法:获取该元素下的所有(包括子集的子集)子集元素

区别:

children() 方法返回返回被选元素的所有直接子元素 (直接子元素,只找儿子不要孙子(: 也就是说不会递归去遍历)

find()方法获得当前元素集合中每个元素的后代 (注意find()方法,必须传参数,否者无效)

示例:查询所有子元素



	
		
		
		

		
	

	
		
div (父节点)
    ul (指定元素)
  • li (子节点1) span (孙节点1)
  • li (子节点2) span (孙节点2)
  • li (子节点3) span (孙节点3)

1.gif

遍历同级元素的方法有7种:

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

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

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

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

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

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

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

siblings()方法

跃问视频
跃问视频

阶跃星辰推出的AI视频生成工具

下载


	
		
	

	
		
Hello

Hello Again

And Again

1.png

next()方法



	
		
	

	
		
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

2.png

nextAll()方法



	
		
	

	

		
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

3.png

nextUntil()方法



	
		
		
		
	
	

		
    ul (父节点)
  • li (兄弟节点)
  • li (兄弟节点)
  • li (类名为"start"的兄弟节点)
  • li (类名为"start"的li节点的下一个兄弟节点)
  • li (类名为"start"的li节点的下一个兄弟节点)
  • li (类名为"start"的li节点的下一个兄弟节点)
  • li (类名为"stop"的兄弟节点)

在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。

4.png

prev()方法



	
		
		
		
	
	

		
    ul (父节点)
  • li (兄弟节点)
  • li (类名为"start"的li节点的上一个兄弟节点)
  • li (类名为"start"的li节点)
  • li (兄弟节点)
  • li (兄弟节点)

5.png

prevAll()方法



	
		
		
		
	
	

		
    ul (parent)
  • li (类名为"start"的li的上一个兄弟节点)
  • li (类名为"start"的li的上一个兄弟节点)
  • li (类名为"start"的li的上一个兄弟节点)
  • li (类名为"start"的li节点)
  • li (兄弟节点)
  • li (兄弟节点)

在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。

6.png

prevUntil()方法



	
		
		
		
	
	

		
    ul (父节点)
  • li (类名为"stop"的兄弟节点)
  • li (类名为"start"的li节点的上一个兄弟节点)
  • li (类名为"start"的li节点的上一个兄弟节点)
  • li (类名为"start"的li节点的上一个兄弟节点)
  • li (类名为"start"的li节点)
  • li (兄弟节点)
  • li (兄弟节点)

在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。

7.png

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

相关文章

相关标签:

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

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.3万人学习

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

共132课时 | 9.5万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号