jQuery parents() 方法



  • 定义和用法

    parents() 方法返回被选元素的所有祖先元素。
    祖先是父、祖父、曾祖父,依此类推。
    DOM 树:该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径(<html>)。
    注意:如果 filter 参数为空,该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。
    该方法与 closest()都是向上遍历 DOM 树,不同点是:
    parents()
    • 从父元素开始
    • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先
    • 返回包含零个、一个或多个元素的 jQuery 对象
    closest()
    • 从当前元素开始
    • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个单一祖先
    • 返回包含零个或一个元素的 jQuery 对象
  • 语法

    $(selector).parents(filter)
  • 参数

    参数 必需的 描述
    filter
    规定缩小搜索祖先元素范围的选择器表达式。
    注意:如需返回多个祖先,请使用逗号分隔每个表达式。
  • 实例

    下例演示了返回所有<span>元素的所有祖先元素:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
    <style>
      .ancestors * {
          display: block;
          border: 2px solid lightgrey;
          color: lightgrey;
          padding: 5px;
          margin: 15px;
       }
    </style>
    //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
       $(document).ready(function () {
          $("span").parents().css({
             "color": "red",
             "border": "2px solid red"
           });
       });
    </script>
    </head>
    <body class="ancestors">body (曾曾祖父元素)
          <div style="width:500px;">div (曾祖父元素)
             <ul>ul (祖父元素)
                <li>li (父元素)
                   <span>span</span>
                </li>
             </ul>
          </div>
    </body>
    </html>
    
    
    尝试一下
  • 相关方法

    • parent() - 返回被选元素的直接父元素
    • parentsUntil()- 返回两个给定参数之间的所有祖先元素