实例

本例演示如何通过 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. VIM基本命令及自用配置

    VIM基本命令 光标移动 G 最后一行 nG 移动到第n行 n回车 光标下移n行 gg 第一行 查找和替换 /word n 重复前一个查找操作 N 向上查找 :n1,n2s/word1/word2/g ...

  2. python数据字典的操作

    一.什么是字典? 字典是Python语言中唯一的映射类型. 映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的哈希表. 字典对象是可变的,它是一个容器 ...

  3. jquery与原生js比较

    以选择符为例,类似于这种 $(".class") 方式,在ie里面,肯定比$("#id") 低很多,而对于chrome和firefox,则因为提供了getEle ...

  4. Linux 程序和进程的关系

    查看进程命令 ps  ps -elf|grep init|grep -v grep 查看init进程ID号:ps aux |grep init |grep -v grep; ps aux 会把系统所有 ...

  5. wdcp挂载数据盘为WWW以及之后出现的各种问题解决方法

    昨天晚上突然有客户反映服务器访问不了,经检查后是因为磁盘满了! 购买阿里云的ECS选择linux系统的时候会赠送20G的系统盘,通常来讲自己用的话基本够了,但是我们作为网络公司,安装了一个WDCP后给 ...

  6. 643. Maximum Average Subarray I 最大子数组的平均值

    [抄题]: Given an array consisting of n integers, find the contiguous subarray of given length k that h ...

  7. CentOS集群自动同步时间的一种方法

    CentOS集群自动同步时间的一种方法 之前有篇日志是手动同步时间的 http://www.ahlinux.com/os/201304/202456.html 之所以这么干,是因为我们实验室的局域网只 ...

  8. Yii2视频

    Yii2 视频分享 需要的小伙伴看过来链接: https://pan.baidu.com/s/1sl4H0RV 密码: nknx  (有问题请留言)

  9. 循环删除DataTable.Row中的多行问题

    在C#中,如果要删除DataTable中的某一行,大约有以下几种办法: 1,使用DataTable.Rows.Remove(DataRow),或者DataTable.Rows.RemoveAt(ind ...

  10. 编写高质量代码改善C#程序的157个建议——建议13: 为类型输出格式化字符串

    建议13: 为类型输出格式化字符串 有两种方法可以为类型提供格式化的字符串输出.一种是意识到类型会产生格式化字符串输出,于是让类型继承接口IFormattable.这对类型来 说,是一种主动实现的方式 ...