jQuery - 元素遍历

最新推荐文章于 2024-01-24 15:58:46 发布
最新推荐文章于 2024-01-24 15:58:46 发布
阅读量421 收藏
点赞数
分类专栏： jQuery-元素遍历 文章标签： jQuery-元素遍历
原文链接：https://blog.csdn.net/qq_30631063/article/details/103190333
版权

什么是遍历：

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种称为对DOM进行遍历。
Alt
JQuery的遍历方法最大的种类就是树的遍历

jQuery遍历-- 祖先

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

1.parent()

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

例子： 返回每个元素的直接父元素

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

2.parents()

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

例子： 返回所有 元素的所有祖先

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

Alt
3.parentsUntil()

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

例子： 返回介于 和

元素之间的所有祖先元素 

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

结果：
Alt

jQuery遍历–后代：

后代是子 ，孙，曾孙 等

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

1.children()

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

例子：返回每个

元素的所有直接子元素： 

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

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

例子： 返回所有类名为"1" 的所有

元素，并且他们是

的直接子元素 

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

2.find()

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

例子： 返回属于

后代的所有 标签 

$(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()方法的使用一样
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30631063/article/details/103190333
————————————————
版权声明：本文为CSDN博主「赫于富」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_30631063/article/details/103190333

林晚七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery遍历select元素(实例讲解)
12-12
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
Jquery遍历元素
qq_43781887的博客
07-12 4899
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jQuery 遍历方法总结
忧郁的蛋的专栏
03-16 7536
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
jQuery遍历（树遍历）
最新发布
m0_59329828的博客
01-24 923
获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
Jquery查找元素的方法汇总
shuncheng_hu的博客
12-15 1万+
Jquery查找元素的方法汇总 通过具体的class，id,标签查找 $('div') // 所有div元素 $('.item') // class为item的元素 $('#main') // id为main的元素 $('#main span, .item') // id为main内的span 或 class为item的元素 $('*') // 文档中所有元素
jQuery中遍历元素，创建元素，添加元素，删除元素汇总
周百万的博客
08-17 3003
jQuery隐式迭代是对同一类元素做了同样的操作。如果相对同一元素做不同的操作，就需要用到遍历。
jQuery遍历的常用方法
Passerby的博客
01-10 478
1.jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 2.jQuery parents() 方法 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 也可以在里面加一个参数，有选择性的对其祖先元素改变。 3.jQuery parentsUntil() 方法 paren
JQuery遍历元素的后代和同胞实现方法
10-21
下面小编就为大家带来一篇JQuery遍历元素的后代和同胞实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery常见的遍历DOM操作详解
10-18
主要介绍了jQuery常见的遍历DOM操作,结合实例形式详细分析了针对DOM节点的parent()、parents()、parentsUntil()、find()、eq()、filter()等各种遍历操作相关函数与使用技巧,需要的朋友可以参考下
jQuery代码优化 遍历篇
12-09
每个遍历方法都会找到一组新元素（一个jQuery对象），然后jQuery会把这组元素推入到栈中。而每个jQuery对象都有三个属性：context、selector和prevObject，其中的prevObject属性就指向这个对象栈中的前一个对象，而...
jQuery中each遍历的三种方法实例分析
10-18
主要介绍了jQuery中each遍历的三种方法,结合实例形式分析了jQuery使用each遍历DOM元素的相关操作技巧,并附带了一个综合实例给予总结说明,需要的朋友可以参考下
【jQuery】jQuery操作之如何查找元素_02
青春木鱼的博客
07-04 1925
本博客是对jQuery中常用的元素查找方法进行了详细的总结和介绍，过万字的梳理，倾情奉献给大家，需要的朋友可以参考下
【JQuery】查找元素
liuyanjinbaobao的博客
11-17 1098
JQuery查找元素
jQuery遍历的几种方式
热门推荐
bug_producter的博客
02-26 2万+
jQuery遍历的几种方式1. jq对象.each(callback) 或 选择器.each(callback)1.1. 回调函数不带参数 (*注意：这种不带参数的回调只能获取到集合中的每一个元素对象，而不能获取到相应索引值，且只能通过this来获取对象)1.2. 回调函数带参数(*可以获取到index索引，且有两种获取元素对象的方式，如下)2. jQuery.each(object, [callback])2.1. 回调函数不带参数 (*与1.1效果类似，只能通过this来获取对象)2.2. 回调函数带参
jQuery选择器 获取元素的十一种方式
m0_74577714的博客
11-08 865
jQuery的选择器，让我为大家介绍一下吧！
jQuery通过遍历来选择元素
m0_47883103的博客
08-10 365
概念 Query 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 向上遍历 $("select").parent() //返回被选元素的直接父元素 $("select").parents() //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) $("select").parents("指定祖先") $("select").parentsUntil("指定祖先
jQuery常用的元素查找方法总结
qq_38861429的博客
12-29 2014
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $...
jquery--遍历
m0_72694993的博客
11-04 1202
children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。方法是用来查找指定元素的所有祖先元素的。方法是用来查找指定元素的父元素的。3.所有兄弟元素查找。
jquery-tmpl selec option 遍历
05-26
你可以使用 jQuery 的 `$.each()`方法来遍历 `select` 元素中的 `option` 元素。以下是一个示例： HTML 代码： ```html 选项1 选项2 选项3 ``` JavaScript 代码： ```javascript // 遍历 select 元素中的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值