实例
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
</body>
</html>
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
语法
.closest(selector)参数 描述
selector 字符串值，包含匹配元素的选择器表达式。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：
.closest() .parents()
从当前元素开始 从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象 返回包含零个、一个或多个元素的 jQuery 对象
请看下面的 HTML 片段：
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索：
$('li.item-a').closest('ul').css('background-color', 'red');亲自试一试
这会改变 level-2 <ul> 的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li> 元素：
$('li.item-a').closest('li').css('background-color', 'red');亲自试一试
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前，.closest() 方法会从 li 元素本身开始搜索，直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context，在其中搜索最接近的元素。
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
以上代码会改变 level-2 <ul> 的颜色，因为它既是列表项 A 的第一个 <ul> 祖先，同时也是列表项 II 的后代。它不会改变 level-1 <ul> 的颜色，因为它不是 list item II 的后代。
**********************************************************
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('ul').css('background-color', 'red');
</script>
</body>
</html>
**********************************************************
分享到：
相关推荐
jQuery作为目前前端开发中最常用的JavaScript库之一，提供了丰富的DOM遍历和操作方法，其中，.closest() 和 .parents() 是用来查找父元素的两个重要方法，虽然它们的功能看起来相似，但它们之间存在细微而关键的区别...
本篇文章将重点介绍jQuery遍历节点树的常用方法，并结合实例展示这些方法的应用。 首先，我们需要了解基本的jQuery选择器。jQuery选择器允许我们以特定的模式选取页面中的DOM元素，比如通过id、类名、标签名或属性...
6. **$(selector).closest(selector)**: 这个方法会向上遍历DOM树，直到找到匹配给定选择器的第一个祖先元素。这对于查找最近的父级元素非常有用，比如寻找最近的表单元素。 在实际应用中，这些方法可以组合使用，...
jQuery 遍历函数是 jQuery 库中的一组方法，用于筛选、查找和串联元素。这些方法可以帮助开发者快速地操作和处理 HTML 元素。下面是 jQuery 遍历函数的详细介绍： 1. `.add()` 方法：将元素添加到匹配元素的集合中...
下面我们详细讲解这些jQuery遍历函数的知识点。 .add()函数用于将元素添加到jQuery对象集合中。这个函数可以将新元素直接添加到现有的jQuery对象集合中，实现链式操作。 .andSelf()函数将之前操作返回的元素集添加...
JQuery提供了许多方法来进行节点的遍历操作，以下是一些常用的遍历节点的方法及其知识点的详细介绍。 1. next()方法 next()方法用于选取每个匹配元素集合中紧接在后面的兄弟元素。如果没有指定选择器，则选取所有...
此外，还可以使用 `next()`、`parent()`、`closest()`、`children()` 和 `siblings()` 方法来访问相邻或相关元素。 链式操作是jQuery的一个关键特性，它允许我们将一系列操作连接在一起，使得代码更加简洁和高效。...
本文将详细介绍JQuery中用于遍历DOM节点的方法，并结合实例加以说明。 ### children()方法 `children()` 方法是JQuery中用于获取匹配元素集合中每个元素的直接子元素的方法。它返回的集合仅包含直接子元素，不包括...
**4.4 jQuery遍历-同胞** - **next()`: 选择当前元素的下一个同胞元素。 - **prev()`: 选择当前元素的上一个同胞元素。 - **siblings(selector)`: 选择当前元素的所有同胞元素。 **4.5 jQuery遍历-过滤** - **...
这可能是通过使用jQuery的DOM遍历方法，如`.children()`, `.siblings()`, 或者 `.closest()`来实现的。同时，数据结构的使用，如JSON或者自定义数据属性，可以帮助我们更好地管理和组织图片信息。 在图片展示效果上...
以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter])`：返回匹配的元素的直接父元素。如果提供了过滤器`filter`，则只返回符合该过滤条件的父元素。...
查找功能用于在当前元素集合中找到匹配的子元素，例如，使用`find()`方法可以遍历子孙元素，而`closest()`则用于寻找最近的匹配祖先元素。 ### 第十四节：jQuery 速成 - 串联 串联方法允许你将多个jQuery对象合并...
HTML代码，测试地址：jQuery 遍历 – closest() 方法 ——我粘代码上来，在页面上会自动隐藏（会显示一下）！谁能教我这是肿么回事！ 1.通过item-1查找 level-3(查找直接上级) 代码如下: $(‘li.item-1’).closest...
jQuery的遍历方法如`.find()`, `.closest()`, `.end()`等，使得在DOM树中导航更加方便。 ### U - Utility Methods jQuery提供了许多实用工具方法，如`.is()`, `.data()`, `.attr()`, `.val()`, `.css()`等，用于...
jQuery 1.6提供了诸如`children()`, `siblings()`, `parent()`, `closest()`, `filter()`, `not()`等一系列方法，帮助开发者高效地遍历和筛选DOM树。 9. **插件开发（Plugin Development）** jQuery 1.6版本支持...
这是一个很好的实际应用例子，展示了如何在实际页面中应用jQuery遍历。 总的来说，jQuery的遍历函数提供了非常强大的机制来操作HTML文档，无论是在处理数组数据还是操作DOM元素时都非常方便。掌握这些遍历方法，...