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. C#串口通信：2自动连接

    上次说到了协议的大致结构,这次我们来说说怎么去实现制动连接串口(当你把设备连上来之后,怎么去让软件自动去识别是否为目标设备,当然这需要上位机与下位机共同完成,这里我们只讨论上位机部分)先上协议: 帧头 ...

  2. Python--多线程、多进程常用概念

    一.常用概念 进程 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成. 线程 线程的出现是为了降低上下文切换的消耗,提高系统的并发性,并突破一个进程只能干 ...

  3. Unity 光照着色器

    光照着色器需要考虑光照的分类,一般分为漫反射和镜面反射. 漫反射计算基本光照: float brightness=dot(normal,lightDir)    将法线和光的入射方向进行点积运算,求出 ...

  4. java抽象类和抽象方法

    首先应该明确一点的是,抽象方法必须定义在抽象类中. 先看一个抽象类的定义: public abstract class Animal { public abstract void eat(); pub ...

  5. springboot 新模板 呵呵了

    <html> <head> <title>批处理任务管理</title> <meta name="decorator" con ...

  6. python自动化开发-[第二十五天]-scrapy进阶与flask使用

    今日内容概要 1.cookie操作 2.pipeline 3.中间件 4.扩展 5.自定义命令 6.scrapy-redis 7.flask使用 - 路由系统 - 视图 - 模版 - message( ...

  7. 洛谷P2770 双路DP // 网络流

    https://www.luogu.org/problemnew/show/P2770 第一眼看过去,觉得这不是一个经典的双路DP模型吗,将一条过去一条回来互不相交的路径看作是起点出发了两条路径一起走 ...

  8. CodeForces992E 二分 + 树状数组（线段树）

    http://codeforces.com/problemset/problem/992/E 题意:给定一个序列 ai​ ,记其前缀和序列为 si​ ,有 q 个询问,每次单点修改,询问是否存在一个  ...

  9. 2017-12-18python全栈9期第三天第四节之str的索引与切片

    #!/user/bin/python# -*- coding:utf-8 -*-s = 'zdlswwzl's1 = s[0]print(s1)s2 = s[-1]print(s2)s3 = s[0: ...

  10. 【leetcode-82，83，26，80】 删除排序链表/数组中的重复元素

    83. 删除排序链表中的重复元素 (1 pass) 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: ...