jQuery遍历节点及实例

最新推荐文章于 2024-04-26 15:49:21 发布
最新推荐文章于 2024-04-26 15:49:21 发布
阅读量301 收藏 1
点赞数
分类专栏： js/jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhkuxia/article/details/106112166
版权

遍历节点及例子

1.父子关系

1.1. children()方法

遍历查找此元素的所有子元素节点

<div id="div1">
	<p class="p1">你好</p>
	<div id="div2"><span id="span1">你好</span></div>
</div>
<script type="text/javascript">
	console.log($('#div1').children())//1.p#p1 2.div#div2
	console.log($('#div1').children('.p'))//1.p#p1
</script>

1.2. parent()方法

返回包含此元素的唯一父节点的元素集合

<div id="div1">
	<p class="p1">你好</p>
	<div id="div2"><span id="span1">你好</span></div>
</div>
<script type="text/javascript">
	console.log($('#span1').parent());//1.div#div2
</script>
相关方法
1.2.1. parents()方法

返回包含此元素的所有祖先节点

<div id="div1">
	<p class="p1">你好</p>
	<div id="div2"><span id="span1">你好</span></div>
</div>
<script type="text/javascript">
	console.log($('#span1').parents());//1.div#div2 2. div#div1 3.body 4.html
	console.log($('#span1').parents('div')); //1.div#div2 2.div#div1
</script>
1.2.2. parentsUntil(‘element’)方法

查找此元素的祖先级元素直到 element 为止,但不包括element

<div id="div1">
	<p class="p1">你好</p>
	<div id="div2"><span id="span1">你好</span></div>
</div>
<script type="text/javascript">
	console.log($('#span1').parentsUntil('div')); //1.div#div2 
</script>

1.3.find()方法

获取此元素的所有后代,并筛选

<div id="div1">
	<p id="p1">你好</p>
	<div id="div2">
		<span id="span1">你好</span>
		<p id="p2">你好</p>
	</div>
</div>
<script type="text/javascript">
	console.log($('#div1').find("p"));1.p#p1 2.p#p2
</script>

1.4.offsetParent()方法

获得用于定位的第一个父元素。如果父元素中没有用于定位,则会返回<html>元素

<div>
	<div id="div1" style="position: absolute;">
		<p id="p1">你好</p>
		<div id="div2" style="position: absolute;">
			<span id="span1">你好</span>
			<p id="p2">你好</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	console.log($('#p2').offsetParent());//1.div#div2
	console.log($('#div1').offsetParent());//1.html
</script>

1.5.closest()方法

从元素本身开始，逐级向上级元素匹配，并返回最先符合匹配的祖先元素。

<div id="div1">
	<p id="p1">你好</p>
	<div id="div2">
		<span id="span1">你好</span>
		<p id="p2">你好</p>
	</div>
</div>
<script type="text/javascript">
	console.log($('#p2').closest("div"));//1.div#div2
</script>

1.6.contents()方法

获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

<div id="div1">
	<p id="p1">你好</p>
	<div id="div2">
		<span id="span1">你好</span>
		<!-- <p id="p2">你好</p> -->
	</div>
</div>
<script type="text/javascript">
	console.log($('#div1').contents());//1.text 2.comment 3.text 4.div#div2 5.text
	console.log($('#div1').contents("div"));//1.div#div2
</script>

2.同级关系

2.1.next()方法

获得此元素同级的下一个元素

<div id="div1">
	<p id="p1">你好</p>
	<div id="div2">
		<span id="span1">你好</span>
		<!-- <p id="p2">你好</p> -->
	</div>
</div>
<script type="text/javascript">
	console.log($('#p1').next());//1.div#div2
</script>
相关方法
2.1.1.nextAll()方法

获得此元素同级的后面的所有元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p1').nextAll());//1.span#span1 2.p#p2
	console.log($('#p1').nextAll("p"));//1.p#p2
</script>
2.1.2.nextUntil('element)方法

获得此元素同级的后面的所有元素,直到符合匹配为止,但不包括element

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p1').nextUntil("#p3"));//1.span#span1 2.p#p2
</script>

2.2.siblings()方法

获得此元素同级的所有元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p2').siblings());//1.p#p1 2.span#span1 3.p#p3
	console.log($('#p2').siblings("p"));//1.p#p1 2.p#p3
</script>

2.3.prev()方法

获得此元素同级的上一个元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p2').prev());//1.span#span1
</script>
相关方法
2.3.1.prevAll()方法

获得此元素同级的前面的所有元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p2').prevAll());//1.span#span1 2.p#p1
	console.log($('#p2').prevAll("p"));//1.p#p1
</script>
2.3.2.prevUntil('element)方法

获得此元素同级的前面的所有元素,直到符合匹配为止,但不包括element

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('#p3').prevUntil("#p1"));//1.p#p2 2.span#span1
</script>

3.按条件筛选

3.1.eq()方法

按索引值筛选p元素(索引下标从0开始)

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('p').eq(1));//1.p#p2
</script>

3.2.first()方法

获取第一个p元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('p').first());//1.p#p1
</script>

3.2.last()方法

获取最后一个p元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('p').last());//1.p#p3
</script>

3.3.filter()方法

获取p标签中符合条件的元素

<div id="div1">
	<p id="p1">你好</p>
	<span id="span1">你好</span>
	<p id="p2">你好</p>
	<p id="p3">你好</p>
</div>
<script type="text/javascript">
	console.log($('p').filter("#p2"));//1.p#p2
</script>

3.4.has()方法

查找含包有span元素的div元素

<div id="div1">
	<span id="span1">你好</span>
</div>
<div id="div2">
	<p id="p1">你好</p>
</div>
<script type="text/javascript">
	console.log($('div').has('span'));//1.div#div1
</script>

3.5.not()方法

查找不包含有span元素的div元素

<div id="div1">
	<span id="span1">你好</span>
</div>
<div id="div2">
	<p id="p1">你好</p>
</div>
<script type="text/javascript">
	console.log($('div').has('span'));//1.div#div2
</script>

3.6.slice(selector,end)方法

选取从selector到end这个范围的p元素,不包含第end个元素

<p id="p1">你好</p>
<p id="p2">你好</p>
<p id="p3">你好</p>
<script type="text/javascript">
	console.log($("p").slice(0, 2));//1.p#p1 2.p#p2
</script>

3.7.is()方法

根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

<p id="p1">你好</p>
<p id="p2">你好</p>
<p id="p3">你好</p>
<script type="text/javascript">
	console.log($("#p1").is("p"));//true
</script>

3.8.end()方法

结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

<p>
	<span>你好</span>
</p>
<script type="text/javascript">
	console.log($("p").find("span").end());//1.p
	console.log($("p").find("span"));//1.span
</script>
苦夏木禾
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery循环遍历子节点并获取值的方法
10-22
主要介绍了jQuery循环遍历子节点并获取值的方法,涉及jQuery节点的遍历与属性操作相关技巧,需要的朋友可以参考下
Jquery-节点遍历4种方法
SYQ15544423296的博客
07-12 2833
Jquery-节点遍历4种方法
jQuery 遍历方法总结
忧郁的蛋的专栏
03-16 8028
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
jQuery遍历节点的方法
最新发布
zhang20040217的博客
04-26 401
3、**.parentsUntil()**：获取元素的所有祖先元素，直到遇到匹配的选择器为止。11、**.prevUntil()**：获取元素之前的所有同胞元素，直到遇到匹配的选择器为止。8、**.nextUntil()**：获取元素之后的所有同胞元素，直到遇到匹配的选择器为止。2、**.parents()**：获取元素的所有祖先元素，直到（但不包括）DOM树的顶部。12、**.find()**：获取元素的后代元素，根据提供的选择器进行过滤。10、**.prevAll()**：获取元素之前的所有同胞元素。
JQuery中的节点遍历
sunset_bo的博客
05-30 614
JQuery中的节点遍历
jQuery节点操作的三个小案例
qq_43696174的博客
04-25 396
一、弹幕 HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h...
jQuery遍历节点树方法分析
10-21
主要介绍了jQuery遍历节点树方法,结合实例形式分析了3种常见的节点遍历技巧,需要的朋友可以参考下
JQuery中节点遍历方法实例
12-10
本文实例讲述了JQuery中节点遍历方法。分享给大家供大家参考。具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
JQuery遍历DOM节点的方法
10-24
主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下
HTML中遍历节点的所有find到的子节点（jQuery - each() 方法的使用）
yyf的博客
10-17 1万+
当我们想遍历一个节点下的所有子节点的时候，我们可以借助jQuery - each() 方法这么做 &lt;html lang="zh"&gt; &lt;head&gt; &lt;title&gt;[html常用脚本整理]&lt;/title&gt; &lt;meta charset="UTF-8" /&gt; &lt;script src="https://cdnjs.
jQuery遍历节点
张子又
01-18 3353
1.jQuery 遍历 - 祖先 1.1 parent() 方法 parent() 方法返回被选元素的直接父元素。 下面的例子返回每个元素的的直接父元素： $(function () { $("span").parent(); }); 加粗样式1.2 parents() 方法 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素()。 下面的例子返回所有 元素...
jquery遍历节点的方法
Cryday的小屋
11-08 3409
jquery遍历节点方法总结: 后代遍历children()方法返回被选元素的所有直接子元素。find()方法返回被选元素的后代元素，一路向下直到最后一个后代。 祖先遍历parent()方法返回被选元素的直接父元素。parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。 同胞遍历siblings()...
jquery 循环_jQuery遍历节点
weixin_39600704的博客
11-29 711
一.遍历节点​ 1.DOM节点遍历​ ①通过儿子找父亲​ 语法：子元素.parentNode​ 注：儿子只能有一个亲父亲，所以返回的是元素节点,而不是集合。​ ②通过父亲找儿子​ 语法：父元素.children​ ...
jquery 获取元素(父节点,子节点,兄弟节点)
millet_handsomes的博客
05-10 2万+
费话不多说,直接上代码 jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content");//返回class为mui-content的父节点 $("#test").children(); // 全部子节点 $("#test").children(...
jquery遍历节点
qq_28596151的博客
05-30 880
    jquery遍历节点的方法相对来说是一个大模块。可以用于查找，过滤和串联等等操作。非常方便匹配到自己想要的元素进行对应的操作。同时根据jquery的选择器的链式编程，可能一行代码就可以实现一个强大的功能。1、children()方法语法：$(selector).children()解释：返回匹配到的元素的子代元素，注意只是子代元素，而且是子元素集合。2、next()方法语法：$(selec...
jQuery遍历节点方法汇总
海沙
05-14 975
科技优家 2017-05-14 17:22 1.children方法:$('div').children---遍历查找div元素的所有子元素节点 1 Hello 2 3 Hello Again 4 您好! 5 6 And Again 7 8 9 $('div').children; //Hello Again您好! 10 $('div').children('.box') //您
【jquery节点遍历】
a_shun66的博客
11-20 943
节点遍历节点遍历first()last()children()find(selector)parent([expr])parents([expr])closest()siblings([expr])eq(index)next([expr])prev([expr])prevAll([expr])nextAll([expr]) 节点遍历 first() console.log("---------- first ---------"); //获取匹配的第一个元素 console.log($("li
jquery获得$(this)下面的指定的子元素
热门推荐
weixin_zsh的博客
08-25 6万+
有时候会遇到循环出来的div，实现用户点击其中一个，据此进行其他操作，我们可以用$(this)来获取用户点击的div，但是如果没有其他的标志来区分这些循环出来的div的话（比如lang值的不同），我们如何获得点击的div的子元素呢？ 方法有两种，都是jQuery中获得子元素的方法------- .find ()  和  .children () find查找所有的子元素，会一直查找，跨层级查找...
用jQuery循环遍历所有子元素
wg243964183的专栏
03-16 6万+
var divContent = $("X");     divContent.appendTo("body");     divContent.children().each(function(i,n){      var obj = $(n)      alert(obj.html());//弹出子元素标签     });
jQuery教程：查找与操作DOM节点
"这篇网页教程主要讲解了在JavaScript中，特别是使用jQuery库进行节点查找的相关技术，包括元素节点和属性节点的查找，并给出了实例代码演示，如子选择器和过滤选择器的应用，以及如何判断元素的可见性。" 在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦夏木禾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值