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弹出框代码封装DialogHelper
Jan 30 Javascript
javascript闭包的理解
Apr 01 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
Jqprint实现页面打印
Jan 06 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 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
十大“创意”战术!
2020/03/04 星际争霸
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
优秀班主任材料
2014/12/16 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis