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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
js+css实现打字效果
Jun 24 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 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的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
laydate日历控件使用方法详解
2017/11/20 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
python 中文乱码问题深入分析
2011/03/13 Python
详谈python http长连接客户端
2017/06/12 Python
Python转换时间的图文方法
2019/07/01 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
如何在django中实现分页功能
2020/04/22 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL