jQuery获取元素父节点的方法


Posted in Javascript onJune 21, 2016

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的主要区别是:

1),前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;

2),前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;

3),前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。

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

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

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
You might like
php入门小知识
2008/03/24 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
一个实用的php验证码类
2017/07/06 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python实现字典依据value排序
2016/02/24 Python
python getpass实现密文实例详解
2019/09/24 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python中PyQuery库用法分享
2021/01/15 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
采购内勤岗位职责
2015/04/13 职场文书