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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
vue选项卡切换登录方式小案例
Sep 27 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动态生成VRML网页
2006/10/09 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python pickle模块用法实例
2015/04/14 Python
python中self原理实例分析
2015/04/30 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
使用Python实现简单的服务器功能
2017/08/25 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
django 读取图片到页面实例
2020/03/27 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
百度软件工程师职位
2013/02/14 面试题
护理专业毕业生自荐信
2014/06/15 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
机关作风建设自查报告
2014/10/22 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年宣传工作总结
2014/11/18 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL