jQuery获取父元素及父节点的方法小结


Posted in Javascript onApril 14, 2016

本文实例总结了jQuery获取父元素及父节点的方法。分享给大家供大家参考,具体如下:

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解:

先举个例子,

<ul class="parent1">
<li><a href="#" id="item1">jquery获取父节点</a></li> 
<li><a href="#">jquery获取父元素</a></li> 
</ul>

我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法:

1、parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

代码如下

$('#item1').parent().parent('.parent1');

2、:parent

匹配含有子元素或者文本的元素

代码如下

$('li:parent');

3、parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

代码如下

$('#items').parents('.parent1');

4、closest([expr])

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是:

① 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
② 前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
③ 前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。

closest对于处理事件委派非常有用。

$('#items1').closest('.parent1');

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 #Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 #Javascript
详解Jquery实现ready和bind事件
Apr 14 #Javascript
一起学写js Calender日历控件
Apr 14 #Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 #Javascript
原生js实现autocomplete插件
Apr 14 #Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php生成QRcode实例
2014/09/22 PHP
PHP时间类完整代码实例
2021/02/26 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
js轮播图代码分享
2016/07/14 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python编写的最短路径算法
2015/03/25 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript