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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python和JavaScript哪个容易上手
2020/06/23 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
运动会800米加油稿
2014/02/22 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
初二学生评语大全
2014/12/26 职场文书
《绝招》教学反思
2016/02/20 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS