jQuery--遍历节点之祖先遍历（parent()、parents()、parentsUntil()）详解

最新推荐文章于 2025-03-13 13:17:58 发布

吴声子夜歌

最新推荐文章于 2025-03-13 13:17:58 发布

阅读量1.5k

点赞数 4

分类专栏： jQuery 文章标签： jQuery 祖先遍历 parent() parents() parentsUntil()

本文链接：https://blog.csdn.net/cold___play/article/details/101935756

版权

jQuery 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了 jQuery 中用于 DOM 遍历的几种方法，包括 parent(), parents(), 和 parentsUntil() 的用法及示例代码。这些方法帮助开发者轻松地在网页结构中查找和操作元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遍历节点

在DOM模型中，提供了parentNode、childNodes、firstChild、lastChild、lastChild、previousSibling和nextSibling等原生属性，用于实现DOM树的遍历而在jQuery中进一步对DOM操作封装和扩展，常见的jQuery遍历方式有以下4种：祖先遍历、后代遍历、同袍遍历和筛选遍历。

祖先遍历

祖先遍历又称向上遍历，常用的方法有parent()、parents()、parentsUntil()，通过向上遍历DOM树的方式来查找元素的祖先元素。

1. parent()方法：
parent()方法用于返回所匹配元素的直接父元素，并允许使用选择器进行筛选，其语法格式如下：

$(selector).parent([childSelector])

$(selector)：表示所匹配的元素
childSelector（可选）：表示指定的选择器
当parent()方法提供childSelector参数时，表示返回所匹配元素元素的父元素，并使用childSelector选择器进行筛选，否则返回所有匹配的父元素

2. parents()方法：
parents()方法用于返回所匹配元素的所有的祖先元素，并允许使用选择器进行筛选。其语法格式如下：

$(selector).parents([childSelector])

$(selector)：表示所匹配的元素
childSelector（可选）：表示指定的选择器
当parent()方法提供childSelector参数时，表示返回所匹配元素元素的父元素，并使用childSelector选择器进行筛选，否则返回所有匹配的父元素

3. parentsUntil()方法：
parentsUntil()方法用于返回两个给定元素之间的所有祖先元素，并允许使用选择器进行筛选，其语法格式如下：

$(selector).parentsUntil([chilSelector | element])

$(selector)：表示所匹配的元素
当parentsUntils()方法没有参数时，将返回所匹配元素的所有祖先元素
当方法提供参数childSelector时，将返回所匹配元素到childSelector选择器之间的所有祖先元素
当方法提供参数element，将返回所匹配元素到element元素之间的所有祖先元素

示例：

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>祖先元素-jQuery遍历</title>
	<script type="text/javascript" src="js/jquery-1.x.js">
	</script>
	<style type="text/css">
		.imageDiv img{ width:100px;}
	</style>
  </head>
  <body>
    <div class="containerDiv">
        <p>
            <span>T恤大全</span>
        </p>
        <hr/>
        <div class="imageDiv">
        	<span><img src="images/shirt.jpg" /></span>
        </div>
        <div>
        	<span>顾客的需求是我们创意的源泉。</span>
        </div>
        <span></span>
    </div>
	<script type="text/javascript">
        $(function (e) {
			//showParentNode();
			showParentsNode();
            //showParentsUntilNode();
        });
        function showParentNode(){
			//返回span标签的直接父元素
			var parentNode=$("span").parent();
			//返回span标签的具有imageDiv样式的直接父元素
            //var parentNode=$("span").parent(".imageDiv");			
            for(var p=0;p<parentNode.length;p++){
                console.log("--------------------------------------");
                console.log(parentNode[p].outerHTML);
            }
        }
        function showParentsNode(){
			//返回span标签的所有的父元素
			var parentsNode=$("span").parents();
			//返回span标签的具有imageDiv样式的直接或间接父元素
            //var parentsNode=$("span").parents(".imageDiv");
            for(var p=0;p<parentsNode.length;p++){
                console.log("--------------------------------------");
                console.log(parentsNode[p].outerHTML);
            }
        }
		function showParentsUntilNode(){
			//返回span标签的所有的父元素
			//var parentsNode=$("span").parentsUntil();
			//返回span标签到body元素之间的直接或间接父元素
            //var parentsNode=$("span").parentsUntil("body");
			//返回span标签到containerDiv选择器之间的直接或间接父元素
			var parentsNode=$("span").parentsUntil(".containerDiv");
            for(var p=0;p<parentsNode.length;p++){
                console.log("--------------------------------------");
                console.log(parentsNode[p].outerHTML);
            }
        }
	</script>
  </body>
</html>

在这里插入图片描述