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 相关文章推荐
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
Express的路由详解
Dec 10 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python Web框架Tornado运行和部署
2020/10/19 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python 实现登录网页的操作方法
2018/05/11 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
微信小程序python用户认证的实现
2019/07/29 Python
python语言的优势是什么
2020/06/17 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
上课迟到检讨书100字
2014/01/11 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
学籍证明模板
2015/06/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技