jQuery closest()

概述

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 内部或插件作者使用。

参数

expr String,ArrayV1.3

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

expr,[context] StringV1.4

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

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

jQuery object objectV1.6

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

element DOMElementV1.6

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

示例

描述:

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

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

描述:

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

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");
});
以上就是jQuery closest()的全部内容,希望这篇jQuery closest()能帮到你,更多内容请访问前端开发博客。

前面的一篇文章我们已经实现了postMessage+window.name实现了iframe高度自适应,iframe跨域通信,这篇文章基于jquery,完善了之前文章作者提到的一些不足,一起来看看。 - 2018-09-12

本文分享了使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。 - 2018-09-14

很久没用fullpage插件来实现全屏效果的滚动了,我自己整理了一个比较简单的PC版全屏滚动代码,几乎fullpage有的东西都有,代码一看就懂。 - 2018-05-09

前端开发制作中有需要需要等到页面中的图片加载完毕后才执行某些事件,而使用jquery的load事件只是dom执行完毕,图片未必加载完成,如果要判断图片加载完毕,需要在图片标签上判断。 - 2018-02-07

jQuery有没有获取图片实际尺寸的方法?就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸。本文给出一个兼容的方式。 - 2018-01-15

很早就使用jQuery的$.extend({},obj1,obj2)来合并两个对象,原来jQuery的这个方法就是深度拷贝($.extend(true,{},obj1))和浅度拷贝的意思,这篇文章分享了 Underscore、lodash 和 jQuery 这些主流的第三方库对于深度拷贝和浅度拷贝的实现与区分。 - 2017-12-02

本文要推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有canvas格式的。canvas的支持自定义logo和文字在上面。 - 2017-06-03

- 2017-07-21

本文整理了一些主要的jQuery API,其中包括jQuery 核心函数和方法、jQuery属性参考手册、jQuery CSS操作、jQuery选择器、jQuery文档操作、jQuery筛选操作、jQuery事件方法、jQuery效果、jQuery Ajax操作、jQuery工具函数、jQuery事件对象、jQuery延迟对象、jQuery回调函数,欢迎收藏使用,本手册会持续更新。 - 2017-04-27

niceScroll 是一个类似于 iOS /移动端 样式的 jQuery 滚动条插件,不需要增加额外的CSS,几乎全浏览器兼容,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。 - 2018-03-16

全部展开 | 全部折叠 | jQuery API手册