jQuery parent() 方法



  • 定义和用法

    parent() 方法返回被选元素的直接父元素。
    DOM 树:该方法只沿着 DOM 树向上遍历单一层级。如需向上遍历直至文档根元素的所有路径(返回祖父节点或其他祖先),请使用 parents()parentsUntil() 方法。
    提示:如需沿着 DOM 树向下遍历单一层级,或向下遍历直至最后一个后代的所有路径(返回子节点或其他后代),请使用 children()find() 方法。
  • 语法

    $(selector).parent(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").parent().css({
             "color": "red",
             "border": "2px solid red"
           });
       });
    </script>
    </head>
    <body>
       <div class="ancestors">
          <div style="width:500px;">div (曾祖父元素)
          <ul>ul (祖父元素)
             <li>li (父元素)
                <span>span</span>
             </li>
          </ul>
          </div>
          <div style="width:500px;">div (祖父元素)
          <p>p (父元素)
             <span>span</span>
          </p>
          </div>
       </div>
    </body>
    </html>
    
    
    尝试一下