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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
js实现开启密码大写提示
Dec 21 Javascript
简单实现js轮播图效果
Jul 14 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python常见字典内建函数用法示例
2018/05/14 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
建筑专业自荐信
2013/10/18 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
社区国庆节活动方案
2014/02/05 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
骨干教师申报材料
2014/12/17 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
如何用python清洗文件中的数据
2021/06/18 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript