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获取变量
Aug 24 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
Node.js文件操作详解
Aug 16 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
JS对日期操作封装代码实例
Nov 08 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
写一个用户在线显示的程序
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python学习必备知识汇总
2017/09/08 Python
pandas通过loc生成新的列方法
2018/11/28 Python
logging level级别介绍
2020/02/21 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
创业大赛策划书
2014/03/01 职场文书
质量月口号
2014/06/20 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers