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. 杜教BM递推板子

    Berlekamp-Massey 算法用于求解常系数线性递推式 #include<bits/stdc++.h> typedef std::vector<int> VI; typ ...

  2. java学习要想精炼掌握应运的必备知识(博文来源于网络)

    一: 编程基础 不管是C还是C++,不管是Java还是PHP,想成为一名合格的程序员,基本的数据结构和算法基础还是要有的.下面几篇文章从思想到实现,为你梳理出常用的数据结构和经典算法. 1-1 常用数 ...

  3. 自定义策略-简单实践 <一>

    1.建立   netcore  mvc 项目. 2.startup.cs 中添加服务 services.AddAuthorization(option=> { var requirements ...

  4. css改变鼠标指针的形状

    <html> <body> <span style="cursor:auto"> <br /> <span style=&qu ...

  5. bootstrap 处理警告

    $("#id").bootstrapValidator({}).on('success.field.bv', function (e, data) { })

  6. datagrid如何获取选中行的索引

    //datagrid获取选中行 var row =baseSelectgrid.datagrid('getSelected'); // 获取被选中行的索引 index var index=baseSe ...

  7. 如何成为优秀的技术Leader

    技术主管,又叫技术经理,英文一般是 Tech Leader ,简称 TL.随着工作经验的不断积累,能力的不断提升,每个人都有机会成为 Team Leader. 然而在机会到来前,我们必须提前做好准备, ...

  8. shell脚本——sed命令

    sed 命令 作为行编辑器,对文件进行编辑(以行为单位进行编辑) sed编辑文件,却不改变原文件 sed工作原理: 指定一个文本文件,依次读取文本文件中的每行内容,读取到模式空间中,在模式空间中进行匹 ...

  9. Jupyter安装和环境配置

    配置: 1. 命令行启动 jupyter notebook 2. 也可以Anaconda直接启动 3. 设置token,如下图所示,命令行中输入 jupyter notebook list C:\Us ...

  10. 前端基础(六):Bootstrap框架

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...