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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
原生JS实现京东查看商品点击放大
Dec 21 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
php连接数据库代码应用分析
2011/05/29 PHP
php 中英文语言转换类
2011/09/07 PHP
php 操作调试的方法
2012/07/12 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php后门URL的防范
2013/11/12 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python实现12306火车票抢票系统
2019/07/04 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
什么是唯一索引
2015/07/05 面试题
华为python面试题
2016/05/03 面试题
教师辞职报告范文
2014/01/20 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
党员承诺践诺书
2014/05/20 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
仰望星空观后感
2015/06/10 职场文书
教师节大会主持词
2015/07/06 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL