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 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
写一个Vue loading 插件
Nov 09 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+Apache+Mysql环境搭建教程
2016/08/01 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
php实现头像上传预览功能
2017/04/27 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
js实现网页收藏功能
2015/12/17 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Python复制文件操作实例详解
2015/11/10 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
导游词开场白
2015/01/31 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android