jQuery DOM元素的遍历

最新推荐文章于 2024-03-18 11:02:23 发布
最新推荐文章于 2024-03-18 11:02:23 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： # JS 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feyehong/article/details/125532852
版权

目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">获取全部div节点</button>
    <hr>
    <div>div1</div>
    <div>div2</div>
</body>
<script src="./js/jquery.min.js"></script>
</html>

⏹方式1: $().each()

适合用来遍历jQuery选中的DOM列表

$('div').each((index, ele) => {
    console.log(index);
    console.log(ele);
    console.log('---------------');
});

⏹方式2: $.each()

也可以遍历DOM列表,但是语义化不如方式1

$.each($('div'), (index, ele) => {
    console.log(index);
    console.log(ele);
    console.log('---------------');
});

$.each()方式主要用来遍历普通的非DOM列表

const personList = [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'}
];
$.each(personList, (index, item) => {
    console.log(index);
    console.log(item);
});

⏹方式3: $().toArray() + for of

可以通过$().toArray()方法直接将伪数组转换为数组

for (const [index, ele] of $('div').toArray().entries()) {
    console.log(index);
    console.log(ele);
    console.log('---------------');
}

⏹方式4: Array.from() + for of

jQuery选择器得到的是一个伪数组,可以通过Array.from()转换为数组才能遍历

for (const [index, ele] of Array.from($('div')).entries()) {
    console.log(index);
    console.log(ele);
    console.log('---------------');
}
fengyehongWorld
关注
专栏目录
Jquery遍历元素
qq_43781887的博客
07-12 5049
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jQuery 元素操作——遍历元素
qq_39368007的博客
11-29 540
jQuery 元素操作 主要是遍历、创建、添加、删除元素操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
jQuery遍历Dom树中的元素
weixin_44374938的博客
03-21 513
一、遍历 遍历：就是根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始，并沿着这个选择移动，知道抵达所期望的元素。 1.向上遍历DOM树 有下面三种方法 parent() - 方法返回被选元素的直接父元素，该方法只会向上一级对DOM数进行遍历 parents() - 方法返回被选元素的所有祖先元素，他一路向上直到文档的根元素（）。 parentsUntil() -方法返回于俩元素之间的所有祖先元素 $(fucntion(){ $("button1").click(fu
jQuery遍历DOM元素与节点方法详解
11-22
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下： 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤返回的父元素。 ② $(selector).parents([filter]):返回匹配元素的所有祖先节点，一直向上直到文档根元素html，方法可以接受一个过滤selector来过滤返回的祖先节点。 备注：parent与parents的区别，parent返回直接父节点，parents返回所有的祖先节点，另外$(“html”).parent()
jQuery 遍历函数
hackcat的专栏
11-27 323
jQuery 遍历函数<br />jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。函数描述.add()将元素添加到匹配元素的集合中。.andSelf()把堆栈中之前的元素集添加到当前集合中。.children()获得匹配元素集合中每个元素的所有子元素。.closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。.contents()获得匹配元素集合中每个元素的子元素，包括文本和注释节点。.each()对 jQuery 对象进行迭代，为每个匹配元素执行函数。.end()结束当
jQuery遍历DOM
weixin_30745641的博客
10-13 102
jQuery提供了多种遍历DOM的方法。遍历方法中最大的种类是树遍历。 向上遍历DOM树 parent()：返回被选元素的直接父元素 parents()：返回被选元素的所有祖先元素，它一直遍历到根元素(<html>) parentsUntil()：返回介于两个元素之间的所有祖先元素。例$("span").parentsUntil("div"),返回介于<span&...
jQuery中的DOM遍历方法
杨欢博的博客
07-14 3824
一、向上遍历 1. parent() 获取元素的直接父元素 $("span").parent().css({ "color":"red", "border":"1px solid red" }) 2. parents() 获取元素的祖先元素，直到根元素html $("span").parents().css({ "color":"red", "border":"1px solid red" }) 3. parentsUntil() 向上查找直到遇见某个祖先元素为止 $("span").pa
jQuery 自学笔记—6 遍历
jishublog
09-05 241
什么是遍历？ jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 图示解释： &lt;di...
jQuery常见的遍历DOM操作详解
12-09
本文实例总结了jQuery常见的遍历DOM操作。分享给大家供大家参考，具体如下： 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素，一直...
jquery(遍历-dom节点)
愿世界和平
05-21 1034
dom元素的父元素向上遍历dom树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil()================== jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 元素的的直接父元素： 实例
jQuery遍历DOM元素
最新发布
weixin_44212870的博客
03-18 781
通过jQuery对象可以向上遍历DOM树。
JQuery 遍历 DOM
lilp_ndsc的专栏
04-05 6056
JQuery DOM遍历JQuery遍历DOM的三种方式：n          CSS选择符n          XPath 属性选择符n          自定义选择符 CSS选择符         JQuery 支持CSS规范3中的大多数选择符。这种对CSS选择符的支持使得开发者地增加网站时，不必考虑不同浏览器之间的CSS差别，只要浏览器启用了javascrip
【Javascript】【jQuery】jQuery遍历自己内部的DOM元素列表
天天向上 Up Up Up (*^▽^*)
04-16 352
//jQuery遍历自己内部的DOM元素列表 $('button').each(function (index, item) { alert(this.innerHTML); });
JQueryDOM和遍历
m0_73050509的博客
08-30 417
JQueryDOM的操作和遍历对象
jQuery DOM 遍历
紫罗兰的博客
07-05 471
children()//查找合集里面的子元素 $('.violet').children(':last'); find()$('.violet').find($('span')); //查找后代元素里的所有 span 元素 $('span', '.violet'); //此写法和上面的方式等价 parent()//查找合集里面的父元素 $('.violet').parent(':last');
全面了解jQuery DOM遍历
02-13 170
DOM遍历意味着，一旦你选择了一个网页上的一种或多种元素，可以通过相对于您最初选择的页面元素移动。 在这个过程中，你可以更换一个新的或添加并从中减去元素的初始选择。 在这篇文章中，我们将看看jQuery的DOM遍历可用的方法，看看图书馆如何提供多种方式为我们根据他们在页面上其他元素的关系很容易地选择要素。 过滤元件 让我们先来看看如何筛选选择到一些更具体。 您可以过滤基于很多喜欢它们相对于...
JQuery学习笔记（三）DOM操作，JQuery遍历
asdasd1fdsyrt的博客
06-12 405
JQuery基础用法一、DOM操作（增删改查） 一、DOM操作（增删改查） 1、新增节点 $(selector).append(content) //在匹配元素内部最后面新增一个节点 $(content).appendTo(selector) //把新节点追加到匹配元素内部最后面 $(selector).prepend(content) //在匹配元素内部最前面新增一个节点 $(content).prependTo(selector) //把新节点追加到匹配元素内部最前面 $(selec
jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历（tree-traversal）。jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历（tree-t
kbx8916的博客
07-31 405
jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历（tree-traversal）。
jQuery DOM节点遍历：children与find方法详解
总结来说，jQuery的children()和find()方法在DOM节点遍历中扮演了不同的角色。children()适合查找直接子节点，而find()则适用于深度搜索整个DOM树。理解并灵活运用这两种方法，能有效提升开发者在处理复杂DOM结构时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值