closest

.closest(selector)

从当前元素开始沿 DOM 树向上，获得匹配第一个符合选择器的祖先元素，返回零个或一个元素的 jQuery 对象。

.parents() 和 .closest() 方法类似，沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选，返回包含零个、一个或多个元素的 jQuery 对象

.parent()：当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

示例：

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>

使用：closest

$('li.item-a').closest('ul').css('border', '1px solid red');

结果：找到第一个父级ul

使用parents：

$('li.item-a').parents('ul').css('border', '1px solid red');

结果：

事件委托场景举例：

<!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 class="a"><b>Click me!</b></li>
    <li class="a">You can also <b>Click me!</b></li>
  </ul>
<script>
  $( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });
</script>
</body>
</html>

事件绑定在文档上，点击每个li分别实现下面效果：

另一个使用delegate实现事件委托：

delegate事件委托

jq中的事件委托：closest，parent，parents，delegate的更多相关文章

  1. 【Unity3D技巧】在Unity中使用事件/委托机制（event/delegate）进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  2. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  3. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  4. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  5. JQuery中的事件委托

    JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...

  6. js中的事件委托或是事件代理

    JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...

  7. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  8. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  9. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

随机推荐

  1. vue学习（2）

    node.js介绍与npm操作 1.node就是JavaScript的一个运行环境(平台),他不是一门语言,也不是JavaScript框架,可以用来开发服务器端应用程序,web系统,其特点是体积小.快 ...

  2. 第三十七篇-BottomNavigationVIew底部导航的使用

    效果图: 添加底部导航和viewpaper 设置底部导航在底部 app:layout_constraintBottom_toBottomOf="parent" 新建四个fragme ...

  3. C实现读写文件

    https://www.cnblogs.com/zhanghongfeng/p/7726199.html https://www.cnblogs.com/xudong-bupt/p/3478297.h ...

  4. marks学习2

    控件的大小单位用dp  控件的高度和宽度 sp字体的单位 控件的字体的大小.可缩放字体. 内边距 padding控件的边缘到控件内荣的距离

  5. linux 进程创建clone、fork与vfork

    目录: 1.clone.fork与vfork介绍 2.fork说明 3.vfork说明 4.clone说明5.fork,vfork,clone的区别 内容: 1.clone.fork与vfork介绍 ...

  6. 【清北学堂2018-刷题冲刺】Contest 7

    Task 1:小奇采药 [问题描述]  小奇是只天资聪颖的喵,他的梦想是成为世界上最伟⼤的医师.  为此,他想拜喵星球最有威望的医师为师.  医师为了判断他的资质,给他出了⼀个难题.  医师把他带到⼀ ...

  7. 安装Redis 4.0单实例

    一.Redis简单介绍 转载于网络 Redis是一个开源(BSD许可)的内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件.由于Redis采用运行在内存中的数据集工作方式,其性能卓越,能支持 ...

  8. MySQL数据库详解之"双1设置"的数据安全的关键参数案例分享

    mysql的"双1验证"指的是innodb_flush_log_at_trx_commit和sync_binlog两个参数设置,这两个是是控制MySQL 磁盘写入策略以及数据安全性 ...

  9. opencv: 基本知识(二）；

    1.cvArr* 与 cv::Mat之间的转换; cv::Mat ---- > cvArr* cv::Mat img; IplImage temp = IplImage(img); cvArr ...

  10. 下载神器（vip下载速度）

    简单介绍: 用过好几款下载神器,现在推荐一款比较好用的软件,强调一点本软件强调开源免费的原则,禁止一切人员在其中收取费用. 我把这款软件放到了,自己的百度云盘. 神器的使用教程如下: 百度云下载连接: ...