jQuery - 元素遍历

article/2025/9/28 12:47:20

前言: 

      一提到“遍历”,大家一般都能联想到  each()  或者  for()等语法,但是在jQuery中究竟什么是遍历? 

什么是遍历:

       jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

       下图展示了一个家族树。通过 jQuery 遍历,能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种称为对DOM进行遍历

 JQuery的遍历方法最大的种类就是树的遍历

jQuery遍历-- 祖先 

    通过jQuery能够向上遍历DOM树,查找元素的祖先

1.parent()

       parent()方法返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历

   例子: 返回每个<span>元素的直接父元素

$(document).ready(function(){$("span").parent();
})

2.parents()

      parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素(<html>)

例子: 返回所有<span> 元素的所有祖先

$(document).ready(function(){$("span").parents();
})

也可以在parents()中 通过 参数来过滤对祖先元素的搜索

下面的例子:  返回所有的<span> 元素的所有祖先,并且他是<ul> 元素 

$(document).ready(function(){$("span").parents("ul");
})

3.parentsUntil() 

  方法返回介于两个给定元素之间的所有祖先元素 

 例子: 返回介于 <span> 和 <div>元素之间的所有祖先元素

$(document).ready(function(){$("span").parentsUntil("div");
});

结果:

jQuery遍历--后代:

后代是子 ,孙,曾孙 等

通过jQuery,我们可以向下遍历DOM树,以查找元素的后代

1.children()

方法返回被选元素的所有直接子元素,只会对最近的下一级Dom树进行遍历

例子:返回每个<div>元素的所有直接子元素:

$(document).ready(function(){$("div").children();})

也可以使用参数来过滤子元素

例子: 返回所有类名为"1" 的所有<p>元素,并且他们是<div>的直接子元素

$(document).ready(function(){$("div").children("p.1");
});

2.find() 

 返回被选元素的后代元素,一路向下直到最后一代

 例子: 返回属于<div> 后代的所有<span>标签 

 

$(document).ready(function(){$("div").find("span");
})

 

 

jQuery遍历--兄弟

兄弟之间拥有相同的父元素,通过jQuery能够在DOM树中遍历元素的同胞元素 

在DOM树中水平遍历

1.siblings() 方法 返回被选元素的所有同胞元素

实例: 返回<h2>的所有兄弟元素

$(documen).ready(function(){$("h2").siblings();
})

1.1可以使用参数来过滤对兄弟元素的选择

例子: 返回属于<h2>同胞元素的所有<p>元素

$(document).ready(function(){$("h2").siblings("p");
});

 

2. next()方法,

该方法返回被选元素的下一个同胞元素,该方法只返回一个元素

例子: 下面的例子返回 <h2>的下一个兄弟元素

$(document).ready(function(){$("h2").next();
})

3.nextAll()方法  返回被选元素的所有跟随的兄弟元素

例子: 返回<h2>的所有跟随的兄弟元素

$(document).ready(function(){$("h2").nextAll();
})

4.nextUntil() 方法 返回介于两个给定参数之间的所有跟随的兄弟元素

例子:返回介于<h2>与<h6>元素之间的所有兄弟元素

$(document).ready(function(){$("h2").nextUntil("h6");
})

5.prev() 方法返回前面的兄弟元素,和next()方法的使用一样

 

 

 

 

 

 

 

 

 

 

 


http://chatgpt.dhexx.cn/article/L6q1PZ8A.shtml

相关文章

Jquery-节点遍历4种方法

节点遍历 遍历子元素 遍历同辈元素 遍历前辈元素 其他遍历方法 遍历子元素 children()方法可以用来获取元素的所有子元素 $(selector).children([expr]); 获取<section>的子元素&#xff0c;但不包含子元素的子元素 var $section $("section").childr…

jq遍历元素

jq遍历元素 通过jq遍历元素、并控制一些元素的属性&#xff08;显示/隐藏、value、src等等&#xff09;&#xff0c;是我们在开发之中比较常见的操作&#xff0c;也为我们的业务功能扩宽了方向&#xff0c;接下来我将结合近段时间在工作上的际遇粗略介绍一下一些稍稍复杂的jq遍…

JS 遍历

目录 1. for 数组遍历2. for ... of3. forEach( )4. some( )5. every( )6. filter( )7. map( )8. find( )9. findIndex( )10. reduce( )11. reduceRight( ) 对象遍历1. for ... in2. Object.keys( )3. Object.values( )4. Object.entries( )5. Object.getOwnPropertyNames( ) 1…

数据库——数据字典

数据库——数据字典是什么&#xff1f; 一.数据字典以及使用场景&#xff1a; User表&#xff0c;User主体有很多属性&#xff0c;比如证件&#xff08;身份证、居住证、港澳通行证…&#xff09;地区&#xff08;河北、河南、北京…&#xff09;等&#xff0c;然后表建好了&…

数据库设计--数据字典

数据字典定义 数据字典&#xff08;data dictionary&#xff09;是对于数据模型中的数据对象或者项目的描述的集合&#xff0c;这样做有利于程序员和其他需要参考的人。分析一个用户交换的对象系统的第一步就是去辨别每一个对象&#xff0c;以及它与其他对象之间的关系。这个过…

解决Error: ENOENT: no such file or directory, scandir ‘xxx\node-sass\vendor‘

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 cnpm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\node…

Syntax Error: Error: ENOENT: no such file or directory, scandir ‘D:

在使用npm安装node-sass的时候&#xff0c;可能会出现如下的报错&#xff1a; Syntax Error: Error: ENOENT: no such file or directory, scandir D:\work\ 解决方案是执行以下方法&#xff1a; npm rebuild node-sass

扫描dir目录函数之scandir()

scandir: 读取特定的目录数据头文件: dirent.h 函数定义: int scandir(const char *dir, struct dirent ***namelist, int (*select)(const struct dirent *), int (*compar)(const struct dirent**, const struct dirent**)); 说明: scandir()会扫描参数dir指定的目录文件, …

解决Error: ENOENT: no such file or directory, scandir

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 npm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\nod…

Module build failed: Error: ENOENT: no such file or directory, scandir node_modules\node-sass\vendor

npm install 报错 Module build failed: Error: ENOENT: no such file or directory, scandir D:\workspaces\xxx\node_modules\node-sass\vendor npm install node-sass 或者 npm rebuild node-sass 即可 下载完成后项目成功启动。

解决Vue Disconnected from UI server errno: -4058, syscall: ‘scandir‘, code: ‘ENOENT‘,

启动vue ui时出现上述报错 查看powershell中的错误提示 发现问题出在扫描项目时项目中少了某个文件夹 解决方法&#xff1a;手动创建该文件 问题解决

npm安装electron时报Error: EPERM: operation not permitted, scandir.....

刚弄完vue脚手架,准备安装electron写个桌面应用&#xff0c;运行命令vue add electron-builder一直报错 Error: EPERM: operation not permitted, scandir C:\Users\ &#xff0c;百度解释说因为没有权限操作&#xff0c;于是百度试各种方法&#xff0c; 打开黑窗口一遍遍尝试&…

解决“: no such file or directory, scandir ‘..\node_modules\node-sass\vendor“

一、报错信息 二、出现原因 在下载包完成启动项目时出现 Error: ENOENT: no such file or directory, scandir ‘D:…\signpay-admin-new\node_modules\node-sass\vendor’ 三、解决办法 重新下载node-sass包即可 npm rebuild node-sass

解决 no such file or directory, scandir ‘node_modules\node-sass\vendor 报错

运行项目突然报错【no such file or directory, scandir node_modules\node-sass\vendor】这个错误 报错说是找不到node-sass文件路径&#xff0c;最后找到了解决方案 错误截图如下&#xff1a; 重新构建一下npm rebuild node-sass包 npm rebuild node-sass 再直接运行&…

C语言测试。自己实现scandir 函数

在C语言课程的后端&#xff0c;讲完指针和标准文件IO处理&#xff0c;我会做出一个难度较大练习&#xff0c;题目就是&#xff0c; 利用标准的目录处理函数 opendir/readdir/closedir实现类似于 scandir的功能。其中接口要scandir 函数一致。 这个题目看起来简单&#xff0c;实…

5G物联网设备,防止黑客入侵是首要问题

5G IoT设备预计2023年将达到4900万台&#xff0c;研究人员启动了一些程序来防止IoT成为渗透的黑洞。开放标准被认为可以推动物联网设备的互操作性&#xff0c;从而使网络安全软件可以在整个网络中查询设备。许多供应商甚至希望在物联网节点中安装应用程序或代理。毕竟所有移动设…

5G技术在物联网行业的应用

2015年6月&#xff0c;国际电信联盟无线通信部门&#xff08;ITU-R&#xff09;5G 工作组第 22 次会议召开&#xff0c;正式将 5G 命名为 IMT-2020。 什么是5G 5G网络即第五代移动通信网络&#xff0c;数据传输速率远高于以前的蜂窝网络&#xff0c;最高可达10 Gbit/s&#xff…

当5G物联网“遇上”供水?供水行业智慧化更进一步!

伴随着5G、物联网等技术的发展&#xff0c;智慧水务产品数字化和智能化程度正在以前所未有的速度提升。在众多水务应用场景中&#xff0c;二次供水因其居民用水“最后一公里”的特殊性&#xff0c;成为水务智慧化的首选方向。 近期&#xff0c;天翼物联携手水务行业龙头企业上海…

5G 及其对物联网的影响

文章转载自网络通信频道 毫不奇怪&#xff0c;数字世界正在通过先进的解决方案逐渐扩展其功能。物联网不再是一项新技术&#xff0c;而是从制造业到教育等不同行业数字化转型战略的共同组成部分。 5G 连接目前使其在技术世界中的存在更加稳定。根据 2022 年 GSMA 的移动经济报告…

MQTT网关 5G物联网网关 PLC控制工业网关

MQTT网关&#xff0c;两个以上的节点之间通信的新型网关&#xff0c;网络节点之间通过互连来实现双向通信。支持PLC协议转MQTT&#xff0c;实现plc数据采集上云&#xff0c;物联网云平台对接&#xff0c;广泛应用于工业自动化plc远程监测控制。 计讯物联5G MQTT物联网网关TG463…