closest(expr|object|element)
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)的更多相关文章
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- jQuery慢慢啃筛选(四)
1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元 ...
- jQuery的选择器总结
jQuery的选择器 不会返回undefined或null 基本选择器 id选择器:$('#id') element选择器:$('elem') class选择器:$('.class') 通配符选择器: ...
- jQuery的核心功能选择器
选择器是jquery的核心 jquery选择器返回的对象是jquery对象,不会返回undefined或者null,因此不必进行判断 基本选择器: ID选择器 $("#ID") ...
- 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 ...
- 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...
- 你知道Object中有哪些方法及其作用吗?
一.引言二.Object方法详解1.1.registerNatives()1.2.getClass()1.2.1.反射三种方式:1.3.hashCode()1.4.equals()1.4.clone( ...
- Object中有哪些方法及其作用
你知道Object中有哪些方法及其作用吗? 一.引言 二.Object方法详解 1.1.registerNatives() 1.2.getClass() 1.2.1.反射三种方式: 1.3.hashC ...
- JAVA中Object类方法详解
一.引言 Object是java所有类的基类,是整个类继承结构的顶端,也是最抽象的一个类.大家天天都在使用toString().equals().hashCode().waite().notify() ...
随机推荐
- 杜教BM递推板子
Berlekamp-Massey 算法用于求解常系数线性递推式 #include<bits/stdc++.h> typedef std::vector<int> VI; typ ...
- java学习要想精炼掌握应运的必备知识(博文来源于网络)
一: 编程基础 不管是C还是C++,不管是Java还是PHP,想成为一名合格的程序员,基本的数据结构和算法基础还是要有的.下面几篇文章从思想到实现,为你梳理出常用的数据结构和经典算法. 1-1 常用数 ...
- 自定义策略-简单实践 <一>
1.建立 netcore mvc 项目. 2.startup.cs 中添加服务 services.AddAuthorization(option=> { var requirements ...
- css改变鼠标指针的形状
<html> <body> <span style="cursor:auto"> <br /> <span style=&qu ...
- bootstrap 处理警告
$("#id").bootstrapValidator({}).on('success.field.bv', function (e, data) { })
- datagrid如何获取选中行的索引
//datagrid获取选中行 var row =baseSelectgrid.datagrid('getSelected'); // 获取被选中行的索引 index var index=baseSe ...
- 如何成为优秀的技术Leader
技术主管,又叫技术经理,英文一般是 Tech Leader ,简称 TL.随着工作经验的不断积累,能力的不断提升,每个人都有机会成为 Team Leader. 然而在机会到来前,我们必须提前做好准备, ...
- shell脚本——sed命令
sed 命令 作为行编辑器,对文件进行编辑(以行为单位进行编辑) sed编辑文件,却不改变原文件 sed工作原理: 指定一个文本文件,依次读取文本文件中的每行内容,读取到模式空间中,在模式空间中进行匹 ...
- Jupyter安装和环境配置
配置: 1. 命令行启动 jupyter notebook 2. 也可以Anaconda直接启动 3. 设置token,如下图所示,命令行中输入 jupyter notebook list C:\Us ...
- 前端基础(六):Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...