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

Love The Way You Lie 2021-08-13 23:58 418阅读 0赞

### 遍历节点 ###

在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])

**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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/6fa563fdf5f442f3aa5d1b23f4cdbf7c.png