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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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/22 PHP
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
微信小程序页面开发注意事项整理
2017/05/18 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
基于python 凸包问题的解决
2020/04/16 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
Java编程面试题
2016/04/04 面试题
小组口号大全
2014/06/09 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
历史学专业求职信
2014/06/19 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2015年工商所工作总结
2015/05/21 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
SQL中的连接查询详解
2022/06/21 SQL Server
JS实现简单九宫格抽奖
2022/06/28 Javascript