closest(expr|object|element)

概述

jQuery 1.3新增。从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。。大理石平台生产厂

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。

closest对于处理事件委托非常有用。

.closest( selectors [, context ] )方法从 jQuery 1.7 开始,不再建议使用该方法,但是 jQuery 1.7 之前仍然可以使用。该方法将主要用于 jQuery 内部或插件作者使用。

参数

exprString,ArrayV1.3

用以过滤元素的表达式。jQuery 1.4开始,也可以传递一个字符串数组,用于查找多个元素。

expr,[context]StringV1.4

expr:用以过滤子元素的表达式

context:DOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

jQuery object objectV1.6

一个用于匹配元素的jQuery对象

elementDOMElementV1.6

一个用于匹配元素的DOM元素。

示例

描述:

展示如何使用closest查找多个元素

HTML 代码:
<ul><li></li><li></li></ul>
jQuery 代码:
$("li:first").closest(["ul", "body"]);
结果:
[ul, body]

描述:

展示如何使用closest来完成事件委托。

HTML 代码:
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
jQuery 代码:
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});

closest(expr|object|element)的更多相关文章

  1. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  2. jQuery慢慢啃筛选(四)

    1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元 ...

  3. jQuery的选择器总结

    jQuery的选择器 不会返回undefined或null 基本选择器 id选择器:$('#id') element选择器:$('elem') class选择器:$('.class') 通配符选择器: ...

  4. jQuery的核心功能选择器

    选择器是jquery的核心 jquery选择器返回的对象是jquery对象,不会返回undefined或者null,因此不必进行判断 基本选择器: ID选择器  $("#ID") ...

  5. Java ArrayList add(int index, E element) example

    Simple add() method is used for adding an element at the end of the list however there is another va ...

  6. 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

    标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...

  7. 你知道Object中有哪些方法及其作用吗?

    一.引言二.Object方法详解1.1.registerNatives()1.2.getClass()1.2.1.反射三种方式:1.3.hashCode()1.4.equals()1.4.clone( ...

  8. Object中有哪些方法及其作用

    你知道Object中有哪些方法及其作用吗? 一.引言 二.Object方法详解 1.1.registerNatives() 1.2.getClass() 1.2.1.反射三种方式: 1.3.hashC ...

  9. JAVA中Object类方法详解

    一.引言 Object是java所有类的基类,是整个类继承结构的顶端,也是最抽象的一个类.大家天天都在使用toString().equals().hashCode().waite().notify() ...

随机推荐

  1. 如何使用RedisTemplate访问Redis数据结构之字符串操作

    Redis 数据结构简介 Redis 可以存储键与5种不同数据结构类型之间的映射,这5种数据结构类型分别为String(字符串).List(列表).Set(集合).Hash(散列)和 Zset(有序集 ...

  2. Ural 1201 Which Day Is It? 题解

    目录 Ural 1201 Which Day Is It? 题解 题意 输入 输出 题解 程序 Ural 1201 Which Day Is It? 题解 题意 打印一个月历. 输入 输入日\((1\ ...

  3. 题目15 链表中倒数第K个节点

    ///////////////////////////////////////////////////////////////////////////////////// // 5. 题目15 链表中 ...

  4. Ubuntu系统降内核

    本人安装的Ubuntu16.04.6系统原生内核为4.15.0,但安装的应用仅支持4.8.0以下内核,因此需要降内核.PS:降内核有风险,操作前请慎重 1.查看可用的内核 输入命令查看已经可用的内核 ...

  5. python学习-8 用户有三次机会登陆

    用户登陆(三次机会) count = 0 while count < 3: user = input('请输入账号:') pwd = input('请输入密码:') ': print(" ...

  6. Python基础总结之第六天开始【先简单认识一次函数】(新手可相互督促)

    午休后,看看电视,在回顾下新的知识----函数.相信很多小伙伴在学习python后 ,学到函数就会有一部分人放弃了,从努力到放弃(内容过于真实) 好希望我也能有很多粉丝,hhh.... 函数: 什么是 ...

  7. Python 常用内置模块详解

    Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...

  8. 怎样获取Cookie

    使用 document.cookie 获取; document.cookie

  9. vue打包后找不到资源路径问题

    问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq ...

  10. ASP.NET---如何使用web api创建web服务

    1 首先创建asp.net web空项目,并且创建模拟数据,我在工程下面创建了一个Models文件夹,在文件夹Nodels下面创建类Product和Repository 具体如下: [Serializ ...