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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
javascript 日期时间 转换的方法
2013/02/21 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
React如何避免重渲染
2018/04/10 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Python多进程机制实例详解
2015/07/02 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python中的数据结构比较
2019/05/13 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
python 获取字典键值对的实现
2020/11/12 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
外科实习自我鉴定
2013/10/06 职场文书
数控技术应届生求职信
2013/11/13 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
红旗渠导游词
2015/02/09 职场文书
小学推普周活动总结
2015/05/07 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Python软件包安装的三种常见方法
2022/07/07 Python