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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
jquery手风琴特效插件
Feb 04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
使用python实现省市三级菜单效果
2016/01/20 Python
Python中格式化format()方法详解
2017/04/01 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python新手学习使用库
2020/06/11 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python调用JavaScript代码的方法
2020/10/27 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
python文件路径操作方法总结
2020/12/21 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
一道Delphi面试题
2016/10/28 面试题
高中校园广播稿
2014/01/11 职场文书
趣味游戏活动方案
2014/02/07 职场文书
骨干教师考核方案
2014/05/09 职场文书
建筑安全生产责任书
2014/07/22 职场文书
公司周年庆活动方案
2014/08/25 职场文书
金砖之国观后感
2015/06/11 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏