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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JavaScript Date对象应用实例分享
Oct 30 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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代码
2013/11/19 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP中header用法小结
2016/05/23 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python处理json数据中的中文
2014/03/06 Python
python集合用法实例分析
2015/05/30 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python高斯消除矩阵
2019/01/02 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
公司董事长职责
2013/12/12 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
五好家庭事迹材料
2014/12/20 职场文书
先进个人总结范文
2015/02/15 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python