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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP文件操作实例总结
2016/09/27 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
php中如何执行linux命令详解
2018/11/06 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
详解VUE中v-bind的基本用法
2017/07/13 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
介绍下static、final、abstract区别
2015/01/30 面试题
应届生护士求职信
2013/11/01 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
基层党员公开承诺书
2014/05/29 职场文书
公司委托书格式
2014/08/01 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
检举信的写法
2019/04/10 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL