jQuery parentsUntil() 方法

  • 定义和用法

    parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。
    祖先是父、祖父、曾祖父,依此类推。
    DOM 树:该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径,直到到达指定的元素为止。
    注意:如果两个参数都为空,该方法将返回所有祖先元素(与 parents() 方法相同)。
  • 语法

    $(selector).parentsUntil(stop,filter)
  • 参数

    参数 必需的 描述
    stop 表示在哪里停止搜索匹配的祖先元素的选择器表达式、元素、jQuery 对象。
    filter
    规定缩小搜索介于 selector 与 stop 之间的祖先元素范围的选择器表达式。
    注意:如需返回多个祖先元素,请使用逗号分隔每个表达式。
  • 实例

    下例演示了返回<span>和<div>元素之间的所有祖先元素:
    <!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").parentsUntil("div").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() - 返回被选元素的直接父元素
    • parents() - 返回被选元素的所有祖先元素
    • closest() - 返回被选元素的第一个祖先