jQuery 遍历 - closest() 方法
实例
本例演示如何通过 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');
jQuery 遍历 - closest() 方法的更多相关文章
- jQuery 遍历 - parent() 方法
ylbtech-jQuery-sizzle:jQuery 遍历 - parent() 方法 parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. 1.A,jQuer ...
- jQuery 遍历 - eq() 方法 查找当前元素
jQuery 遍历 - eq() 方法 if(data[i].status !='已送达'){ $('.w-beget').eq(i).attr('disabled','disabled'); }
- jQuery 遍历 - siblings() 方法
本文来自:http://www.w3school.com.cn/jquery/traversing_siblings.asp jQuery 遍历参考手册 实例 查找每个 p 元素的所有类名为 &quo ...
- jquery遍历DOM方法总结
1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...
- jQuery 遍历 - children() 方法
jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...
- jQuery 遍历 - slice() 方法
实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: $("p").slice(0, 2).wrapInner(""); 亲自试一试 定义和用法 s ...
- jQuery 遍历 - each() 方法
定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. 语法 $(selector).each(function(index,element)) ...
- jQuery 遍历 - children() 方法 获取指定id下子元素的值
<a id="Aobj_2_2" class="" specid="2" specvid="2" href=&qu ...
- JQuery 遍历 - prev() 方法
http://www.w3school.com.cn/jquery/traversing_prev.asp http://www.w3school.com.cn/jquery/jquery_ref_t ...
随机推荐
- Python名称空间和闭包
一.名称空间 1.定义:又名 name space,顾名思义,就是存放名字的地方.比如:若变量x = 1,1存放在内存中, 而名称空间正是存放名字x与1绑定关系的地方. 2.分类: locals : ...
- 【HDU4966】GGS-DDU
题意 有n种科目,每个科目都有一个最高的等级a[i].开始的时候,每个科目的等级都是0.现在要选择一些课程进行学习使得每一个科目都达到最高等级.这里有m节课可供选择.对于每门课给出L1[i],c[i] ...
- mysql 纸 mysql_fetch_array OR mysql_fetch_assoc OR mysql_fetch_row
<?php $con = mysql_connect("localhost", "root", "123456");if (!$con ...
- 面试题:彻底理解ThreadLocal 索引的利弊 背1
.索引利弊 --整理 1.索引的好处 a.提高数据检索的效率,降低检索过程中必须要读取得数据量,降低数据库IO成本. b.降低数据库的排序成本.因为索引就是对字段数据进行排序后存储的,如果待排序的 ...
- 默默的发现在网上找到的hook NtQueryDirectoryFile......
默默的发现在网上找到的hook NtQueryDirectoryFile...... hook NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...
- dev 官网
https://www.devexpress.com/Support/Center/Example/Details/E1343 <%@ Page Language="C#" ...
- Part7-时钟初始化_lesson1
1.概念解析 1.1时钟脉冲信号 1.2时钟脉冲频率 1.3时钟源(提供时钟脉冲信号) a.晶振 b.锁相环PLL 2.时钟体系 2440: 晶振的频率.时钟体系有多少个PLL.这些PLL分别产生了哪 ...
- jQuery 演变史
一.说明 最近我读完了 jQuery 官方的博客仓库,目的是为了梳理清楚 jQuery API 接口的演变过程.从而明确知道在对应版本下使用正确.合适的 API,以下便是我的总结笔记. jQuery ...
- Laravel Gate 授权方式的使用指南
参考链接:An Introduction to Laravel Authorization Gates 本文使用 Laravel 的 Gate 授权方式 实现一个基于用户角色的博客发布系统. 在系统包 ...
- LightOJ 1038 Race to 1 Again (概率DP,记忆化搜索)
题意:给定一个数 n,然后每次除以他的一个因数,如果除到1则结束,问期望是多少. 析:概率DP,可以用记忆公搜索来做,dp[i] = 1/m*sum(dp[j] + 1) + 1/m * (dp[i] ...