jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别


Posted in Javascript onDecember 02, 2013

在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents()、 parent()、closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考。

 1.parents([selector])

本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的。

同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。

 2.parent([selector])

本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的父节点。它和parents()不同的是,它只向上搜索一层,而parents()会搜索整个DOM树。

本方法也可以接受一个字符串选择器,用于筛选返回的元素。

有人可能会问:一个DOM元素的父元素不是只有一个么,为什么还要一个selector选择器进行筛选呢?其实一个jQuery对象可能包含有很多个DOM元素,例如$('a').parent()就是选择所有<a>标签的父元素,这样返回的就是一个元素集,所以可以进行筛选。

 3.closest(selector)

本方法用于向上遍历jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,直到找到符合selector选择器的节点为止。

它和parents()的区别:

closest()从自身开始向上遍历,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;

parents()从自身的父节点开始向上遍历,返回所有祖先节点,并根据选择器对这些节点进行筛选,最终返回的jQuery对象可能包含0、1或者多个对象。

 一个能说明区别的例子:

<!DOCTYPE html>
<html>
<head>
    <title>a test document</title>
</head>
<body>
    <div>
        <p>
            <span>
                <b>My parents</b>
            </span>
        </p>
    </div>
</body>
</html>

在上述文档中:

$('b').parents()将返回:由span、p、div、body、html等元素构造的jQuery对象;

$('b').parent()将返回:由span构造的jQuery对象;

$('b').closest('div')将返回:由div构造的jQuery对象。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 #Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 #Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 #Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
php常用hash加密函数
2014/11/22 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
js实现点赞效果
2020/03/16 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python实现电子词典
2020/03/03 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python实现人像动漫化的示例代码
2020/05/17 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
什么是Smart Navigation?
2016/07/03 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
高三励志标语
2014/06/05 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
裁员通知
2015/04/25 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL