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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
个人小程序接入支付解决方案
May 23 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php join函数应用
2011/05/04 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
自制PHP框架之设计模式
2017/05/07 PHP
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python 日志增量抓取实现方法
2018/04/28 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python实现交并比IOU教程
2020/04/16 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
领导的自我鉴定
2013/12/28 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
晚会主持词开场白
2014/03/17 职场文书
政府采购方案
2014/06/12 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
爱情保证书
2015/01/17 职场文书
博物馆观后感
2015/06/05 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
bat批处理之字符串操作的实现
2022/03/16 Python