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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
jquery indexOf使用方法
Aug 19 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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获得文件扩展名三法
2006/11/25 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php修改时间格式的代码
2011/05/29 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python实现Adapter模式实例代码
2018/02/09 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
医药专业推荐信
2013/11/15 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
会计找工作求职信范文
2013/12/09 职场文书
小学老师寄语大全
2014/04/04 职场文书
卫生标语大全
2014/06/21 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python