实例

本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:

$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});

亲自试一试

定义和用法

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');

jQuery 遍历 - closest() 方法的更多相关文章

  1. jQuery 遍历 - parent() 方法

    ylbtech-jQuery-sizzle:jQuery 遍历 - parent() 方法  parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. 1.A,jQuer ...

  2. jQuery 遍历 - eq() 方法 查找当前元素

    jQuery 遍历 - eq() 方法 if(data[i].status !='已送达'){ $('.w-beget').eq(i).attr('disabled','disabled'); }

  3. jQuery 遍历 - siblings() 方法

    本文来自:http://www.w3school.com.cn/jquery/traversing_siblings.asp jQuery 遍历参考手册 实例 查找每个 p 元素的所有类名为 &quo ...

  4. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  5. jQuery 遍历 - children() 方法

    jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...

  6. jQuery 遍历 - slice() 方法

    实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: $("p").slice(0, 2).wrapInner(""); 亲自试一试 定义和用法 s ...

  7. jQuery 遍历 - each() 方法

    定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. 语法 $(selector).each(function(index,element)) ...

  8. jQuery 遍历 - children() 方法 获取指定id下子元素的值

    <a id="Aobj_2_2" class="" specid="2" specvid="2" href=&qu ...

  9. JQuery 遍历 - prev() 方法

    http://www.w3school.com.cn/jquery/traversing_prev.asp http://www.w3school.com.cn/jquery/jquery_ref_t ...

随机推荐

  1. Python名称空间和闭包

    一.名称空间 1.定义:又名 name space,顾名思义,就是存放名字的地方.比如:若变量x = 1,1存放在内存中, 而名称空间正是存放名字x与1绑定关系的地方. 2.分类: locals : ...

  2. 【HDU4966】GGS-DDU

    题意 有n种科目,每个科目都有一个最高的等级a[i].开始的时候,每个科目的等级都是0.现在要选择一些课程进行学习使得每一个科目都达到最高等级.这里有m节课可供选择.对于每门课给出L1[i],c[i] ...

  3. mysql 纸 mysql_fetch_array OR mysql_fetch_assoc OR mysql_fetch_row

    <?php $con = mysql_connect("localhost", "root", "123456");if (!$con ...

  4. 面试题:彻底理解ThreadLocal 索引的利弊 背1

    .索引利弊   --整理 1.索引的好处 a.提高数据检索的效率,降低检索过程中必须要读取得数据量,降低数据库IO成本. b.降低数据库的排序成本.因为索引就是对字段数据进行排序后存储的,如果待排序的 ...

  5. 默默的发现在网上找到的hook NtQueryDirectoryFile......

    默默的发现在网上找到的hook  NtQueryDirectoryFile...... hook  NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...

  6. dev 官网

    https://www.devexpress.com/Support/Center/Example/Details/E1343 <%@ Page Language="C#" ...

  7. Part7-时钟初始化_lesson1

    1.概念解析 1.1时钟脉冲信号 1.2时钟脉冲频率 1.3时钟源(提供时钟脉冲信号) a.晶振 b.锁相环PLL 2.时钟体系 2440: 晶振的频率.时钟体系有多少个PLL.这些PLL分别产生了哪 ...

  8. jQuery 演变史

    一.说明 最近我读完了 jQuery 官方的博客仓库,目的是为了梳理清楚 jQuery API 接口的演变过程.从而明确知道在对应版本下使用正确.合适的 API,以下便是我的总结笔记. jQuery ...

  9. Laravel Gate 授权方式的使用指南

    参考链接:An Introduction to Laravel Authorization Gates 本文使用 Laravel 的 Gate 授权方式 实现一个基于用户角色的博客发布系统. 在系统包 ...

  10. LightOJ 1038 Race to 1 Again (概率DP,记忆化搜索)

    题意:给定一个数 n,然后每次除以他的一个因数,如果除到1则结束,问期望是多少. 析:概率DP,可以用记忆公搜索来做,dp[i] = 1/m*sum(dp[j] + 1) + 1/m * (dp[i] ...