closest() 方法获得匹配选择器的第一个祖先元素

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

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

定义和用法 closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

语法 .closest(selector)

参数描述
selector字符串值,包含匹配元素的选择器表达式。

参数 描述 selector 字符串值,包含匹配元素的选择器表达式。 详细说明 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:

.closest().parents()
从当前元素开始从父元素开始
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象返回包含零个、一个或多个元素的 jQuery 对象
原文链接:segmentfault.com

上一篇:express启动本地服务指南
下一篇:解构赋值是深拷贝吗?

相关推荐

  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 重学前端学习笔记(二十二)--选择器的机制

    笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系(https://time.geekbang.org/column/i...

    1 年前
  • 通过css类/选择器选取元素 文档结构和遍历 元素树的文档

    通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组。 js中使用className属性来保存HTML的class的属性值 尽管如此,js还定义了...

    2 年前
  • 选择某类的最后一个元素——CSS3伪类选择器走过的坑

    众所周知,在CSS3规范中,添加了许多了伪类选择器,这些选择器代替了不少JS的工作,让我们从以前通过获取DOM节点进而进行样式修改的操作,变得更加便捷高效。 然而我在近期开发使用的过程中,遇到了不少坑...

    3 个月前
  • 达文西,用JS写个兼容IE8浏览器的类选择器

    基于某些考虑,有时我们项目中会尽量使用原生,这种情况下连最简单的类选择器可能都要进行兼容性处理。是后来引入的,历史不如和。越是新的特性,浏览器的兼容相对就越差。 虽然这3个选择器都并不是百分百兼容所...

    1 年前
  • 转行学前端的第 48 天 : 了解 ECMAScript RegExp 相关匹配规则

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索来基础学习 RegExp 修饰符。今天主要是基于搜索来学习 RegExp 相关匹配规则,主要是...

    2 天前
  • 详谈jQuery中的一些正则匹配表达式

    jQuery常用正则匹配表达式 以上这篇详谈jQuery中的一些正则匹配表达式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持JavaScript中文网。

    3 年前
  • 计数的JavaScript中的正则表达式匹配数

    Maxwai(https://stackoverflow.com/users/1891133/max)提出了一个问题:Count number of matches of a regex in Jav...

    2 年前
  • 触摸印章技术方案(多点位置匹配)

    触摸印章技术方案(多点位置匹配) 目前建议在Pc Chrome测试,事件监听的是类 stampCode2.gif(https://img.javascriptcn.com/665440e5901...

    7 个月前
  • 解析类Dota游戏天梯匹配系统的实现方式

    什么是类Dota游戏的天梯匹配 玩过Dota或者LOL的人都知道 . 天梯匹配系统是一套将 玩家的实力 量化,并进行实时分配组队游戏 , 结算的系统. 旨在将单局游戏的胜率控制在50%左右. 避免...

    2 年前

官方社区

扫码加入 JavaScript 社区