jQuery 遍历 - closest() 方法
jQuery 遍历参考手册
实例
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:
$( document ).bind("click", function( e ) {$( e.target ).closest("li")
.toggleClass("hilight");});
亲自试一试
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
语法
.closest(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
请看下面的 HTML 片段:
<ul id="one" class="level-1"><li class="item-i">I</li><li id="ii" class="item-ii">II<ul class="level-2"><li class="item-a">A</li><li class="item-b">B<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li></ul></li><li class="item-c">C</li></ul></li><li class="item-iii">III</li> </ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索:
$('li.item-a').closest('ul').css('background-color', 'red');
亲自试一试
这会改变 level-2 <ul> 的颜色,这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li> 元素:
$('li.item-a').closest('li').css('background-color', 'red');
亲自试一试
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前,.closest() 方法会从 li 元素本身开始搜索,直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context,在其中搜索最接近的元素。
var listItemII = document.getElementById('ii'); $('li.item-a').closest('ul', listItemII).css('background-color', 'red'); $('li.item-a').closest('#one', listItemII).css('background-color', 'green');
转载于:https://www.cnblogs.com/kunlunmountain/p/5710811.html
jQuery 遍历 - closest() 方法相关推荐
- jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
- jQuery 遍历 - children() 方法
jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...
- jQuery 遍历 - slice() 方法
实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: .slice(0, 2) 亲自试一试 定义和用法 slice() 把匹配元素集合缩减为指定的指数范围的子集. 语法 .slice(se ...
- jQuery 遍历 - prev() 方法
定义和用法 prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的. .prev(selector) 参数 描述 selector 字符串值,包含用于匹配元素的选择器 ...
- html遍历map,jQuery 遍历map()方法详解
一.定义和用法 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 二.语法 .map(callback(index,domElement)) 三.详细说明 ...
- jQuery 遍历 each()方法
输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(th ...
- jQuery 遍历 - siblings()方法
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素: $("p").siblings(".selected") 转载于:h ...
- jquery遍历节点的方法
jquery遍历节点方法总结: 后代遍历 children()方法返回被选元素的所有直接子元素. find()方法返回被选元素的后代元素,一路向下直到最后一个后代. 祖先遍历 parent()方法返回 ...
- jquery遍历多个li_jQuery使用each遍历循环的方法
1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function ...
最新文章
- Android 人民币符号在布局中实现的效果不一样的处理方法
- 自然语言处理(NLP)之从文本中提取时间
- IBM发表论文:可能已找到处理量子计算退相干的方法
- matlab 雷达图函数,R语言之可视化(20)ggradar雷达图
- 前端经典面试题 不经典不要star!
- oj运行时错误如何查找原因_VLOOKUP又失灵?避免这四种错误类型
- Ubuntu中让SSH自动重连
- 让你的产品更懂世界:如何提升场景文本识别中的语言模型
- 创建unique时,约束和索引有何区别。唯一约束和唯一索引区别,选项忽略重复键作用
- linux目录名乱码,为什么挂载中文目录或文件名是乱码?
- 生存的关键往往在于偶然的机遇——李光耀
- 【Codeforces Round #508 (Div. 2)】Slime【简单贪心】
- window下开启mysql慢查询和分割慢查询日志
- Edraw安装教程(附下载链接)
- 全图范围设置(转自Esri中国社区)
- JVM对象内存分配机制之对象在Eden区分配(五)
- iTunes只能装C盘吗_如何通过iTunes将iPhone备份到移动硬盘?
- asp.net常用的命名空间及含义
- 老徐 MYSQL 宝典
- yigo基础学习笔记3_数据迁移