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 相关文章推荐
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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登陆页的密码处理方式分享
2013/10/14 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
原生js实现轮播图
2017/02/27 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python实现的彩票机选器实例
2015/06/17 Python
使用python编写监听端
2018/04/12 Python
Python中的self用法详解
2019/08/06 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
教师评优事迹材料
2014/01/10 职场文书
市场部经理岗位职责
2014/04/10 职场文书
小班下学期评语
2014/05/04 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技