JQuery closest()的用法

已于 2023-09-01 14:38:51 修改
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript基础知识 文章标签： jquery 前端 javascript
于 2023-08-21 18:09:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44438941/article/details/132367173
版权
文章介绍了JavaScript中的closest()和parents()方法，强调closest的优点在于简洁地返回第一个符合条件的祖先元素，而parents则可能返回多个元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

closest（）是一个非常好用的查找祖先对象的方法，它和parent（）和parents（）相比，优点是简洁直观，返回0或1个对象，避免了返回很多对象而不知道怎么处理的尴尬，查找的是满足一定条件下的第一个祖先

var tbl = $(obj).closest("table");

这句js的意思是找到obj对象的第一个table祖先元素，这里的obj可以是tr，tbody，td，td或tr里面的input，等等元素标签 

.closest()
1.从当前元素开始
2.遍历DOM树直到找到与提供的选择器匹配的元素
3.遍历原始集合中的每一个元素，返回包含零个或一个元素的jQuery对象，返回元素的顺序与文档顺序保持一致


.parents()
1.从父元素开始
2.遍历DOM树到达文档的根元素，添加每一个祖先元素到临时的集合中，如果提供的选择器则基于这个选择器过于临时的集合
3.遍历原始集合中的每一个元素，返回包含零个或多个元素的jQuery对象，返回元素的顺序与文档顺序相反
 

jQuery 遍历 - closest() 方法 is()方法
qq_27009517的博客
06-28 388
closest() 实例 本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景： $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight"); }); 亲自试一试 定义和用法 closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。 语法 .closest
jquery通过closest选择器修改上级元素的方法
10-24
在本文中，我们将详细介绍jQuery中的closest选择器及其使用方法。jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery，开发者可以更轻松地操作DOM元素，编写更少的...
jq中closest()，parents()，parent()，
weixin_38098192的博客
05-07 1271
closet():         从当前元素开始        沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先        返回包含零个或一个元素的 jQuery 对象parents()：        从父元素开始        沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先         返回包含零个、一个或多个元素的 jQuery 对象parent()：返...
JavaScript 中 closest 方法详解
最新发布
2301_76428778的博客
02-17 681
事件委托是一种常见的 DOM 事件处理技术，它将事件监听器添加到父元素上，而不是每个子元素。方法为 JavaScript 开发者在 DOM 操作中提供了极大的便利，无论是处理事件委托还是动态内容，都能轻松应对。在处理动态生成的内容时，传统的事件绑定方式可能会失效，因为新添加的元素没有绑定事件。如果遍历完所有元素都没有找到匹配的，该方法将返回。方法是一个非常实用的工具，它能帮助开发者高效地查找元素。方法就像是一个 “查找器”，能快速定位到符合条件的最近祖先元素。若指定的选择器在元素的祖先中不存在，
jQuery.closest() 函数详解
qq_36291682的博客
12-05 5766
closest()函数用于从当前匹配元素开始，逐级向上级选取符合指定表达式的第一个元素，并以jQuery对象的形式返回。 这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象。 该函数属于jQuery对象(实例)。 语法: jQuery 1.3 新增该函数。 jQueryObject.closest( expr [, context ] ) 参数
jQuery closest() 方法
L.Cheng Blog
12-21 378
在这个例子中, $("span").closest("span") 指我们查找一个span元素中的第一个span祖先。由于方法从当前元素开始，它将返回一个span，假如我们用parents() 方法替代，它将没有东西返回，因为span的父元素是li。closest() 方法返回被选元素的第一个祖先元素。祖先是父、祖父、曾祖父，依此类推。
jquery closest方法
www.hohode.com
05-07 1319
.closest( selector ) Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tre
jQuery中closest()函数用法实例
10-24
jQuery中的closest()函数是一个非常实用的工具，它可以帮助我们从当前选定的元素出发，向上遍历DOM树直到找到最近的匹配指定选择器的祖先元素。这个函数在处理具有层级结构的HTML文档时特别有用，例如，如果有一个...
JQuery.closest(),parent(),parents()寻找父结点
10-28
在JavaScript的jQuery库中，`closest()`, `parent()`, 和 `parents()` 是三个非常重要的方法，用于在DOM树中查找元素的父级。这些方法在网页开发中常常被用来定位和操作元素，特别是在处理复杂的DOM结构时。下面将...
jquery中closest的用法
baidu_36681154的博客
01-07 1408
前些天在做前端移动端遇到tab选项卡中别人写代码用到closest，不知道什么意思，于是查了下手册，意思写得很抽象，于是我便自己做一个测试，基本理解他的含义，现在分享给大家 首先我做第一个实验  引入jquey,写入demo ul,li,span{  display: block; border: 2px solid bla
jQuery遍历之closest()方法
qq_37036642的博客
08-04 936
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法 closest()方法接受一个匹配元素的选择器字符串 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素 例如：在div元素中
jquery的closest方法和parents方法的区别
weixin_33971130的博客
10-21 136
今天第一次看到closest方法，以前也从来没用过。 该方法从元素本身开始往上查找，返回最近的匹配的祖先元素。 1、closest查找开始于自身，parents开始于元素父级 2、closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合 3、closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多...
jquery 中closest()的用法
weixin_30527323的博客
08-31 321
在jquery中遍历标签有parents()和closest()两个查找父元素的标签区别如下： closest()是从当前标签开始查找如下代码： var h = $('li.class1').closest('div').css('background-color', 'red'); <div>fjhdfjhdfgh <ul>...
jquery closest()方法
bbwdd的博客
09-19 1069
I   II       A     B               1         2         3               C       III $('li.item-a').closest('ul').css('background-color', 'red'); 这会改变 level-2 的颜色，这是
jquery closest()的用法
明天的你会感谢今天的自己
10-22 6355
   closest（）是一个非常好用的查找祖先对象的方法，它和parent（）和parents（）相比，优点是简洁直观，返回0或1个对象，避免了返回很多对象而不知道怎么处理的尴尬，查找的是满足一定条件下的第一个祖先。    它的常用格式是： var tbl = $(obj).closest("table"); 这句js的意思是找到obj对象的第一个table祖先元素，这里的obj可以是t...
closest 用法
u010580980的专栏
11-20 1191
ceshi function ceshi(obj){ var cs = $(obj.).closest("table"); alert(cs.html()); }
jQuery 遍历 - closest() 方法
jiangxin00的博客
08-14 234
实例 本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景： li { margin: 3px; padding: 3px; background: #EEEEEE; } li.hilight { background: yellow; } Click me! Y...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值