jQuery closest() 方法

实例

如何选择父元素的直接子元素 <p> 元素:

$(document).ready(function(){
  $("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});

结果:

body (曾曾祖父级)

div (曾祖父级)

li (直接父级) span

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://libs.baidu.com/jquery/2.1.4/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>
<!-- 在这个例子中, $("span").closest("ul") 这意味着我们要寻找span的第一个祖先，这是一个 ul 元素。span 最接近的（CLOSEST）祖先是 li，但由于我们正在寻找 ul，jQuery 跳过 li 元素，继续搜索下一个祖先，直到找到我们的 ul 的匹配元素。如果我们改用 parents() 方法，它将返回两个 ul 祖先。 -->
</html>

运行一下

定义与用法

closest() 方法返回所选元素的第一个祖先级元素。

祖先元素是父级、祖父级、曾祖父级等等。

DOM 树: 该方法从当前元素向上遍历，一直遍历到文档的根元素（<html>），以找到 DOM 元素的第一个祖先。

这个方法与 parents() 相似, 因为它们都遍历 DOM 树。区别如下:

closest()

从当前元素开始
向上遍历 DOM 树并返回与传递的表达式匹配的第一个（单个）祖先元素
返回的 jQuery 对象包含 0 个或 1 个元素

parents()

从父元素开始
向上移动 DOM 树并返回与传递的表达式匹配的所有祖先元素
返回的 jQuery 对象包含 0 个或多个元素

其他相关方法:

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

语法

返回所选元素的第一个祖先:

$(selector).closest(filter)

使用 DOM 上下文返回第一个祖先元素，在其中查找 DOM 树:

$(selector).closest(filter,context)

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

jQuery closest() 方法

实例

定义与用法

语法

更多实例

分类导航