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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
JavaScript对象属性操作实例解析
Feb 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
PHP 输出缓存详解
2009/06/20 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
招股说明书范本
2014/05/06 职场文书
质量提升方案
2014/06/16 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
导游欢送词
2015/01/31 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python