jQuery closest() 方法

  • 定义和用法

    closest() 方法返回被选元素的第一个祖先元素。
    祖先是父、祖父、曾祖父,依此类推。
    DOM 树:该方法从当前元素向上遍历,直至文档根元素的所有路径(),来查找 DOM 元素的第一个祖先元素。
    该方法与 parents() 类似,都是向上遍历 DOM 树,不同点是:
    closest()
    • 从当前元素开始
    • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个单一祖先
    • 返回包含零个或一个元素的 jQuery 对象
    parents()
    • 从父元素开始
    • 沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先
    • 返回包含零个、一个或多个元素的 jQuery 对象
  • 语法

    返回被选元素的第一个祖先元素:
    $(selector).closest(filter)
    返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:
    $(selector).closest(filter,context)
  • 参数

    参数 必需的 描述
    filter 规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。
    context 在其内可以找到匹配元素的 DOM 元素。
  • 实例

    下例演示了返回 <span> 的第一个祖先元素,是一个 <ul> 元素:
    <!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").closest("ul").css({"color":"red","border":"2px solid red"});
          });
    </script>
    </head>
    <body class="ancestors"> body (曾曾祖先节点)
             <div style="width:500px;">div (曾祖先节点)
                 <ul>ul (第二祖先 - 第二祖先节点) 
                     <ul>ul (第一祖先 - 第一祖先节点)
                         <li>li (直接父节点)
                             <span>span </span>
                         </li>
                     </ul>
                 </ul>   
             </div>
    </body>
    </html>
    
    尝试一下
  • 相关方法

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