jquery获取父元素或父节点的方法
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获取父元素或父节点
使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点 jquery获取父元素方法比较多,比如parent(),parents(),c ...
- jquery获取html元素的绝对位置和相对位置
jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- jquery获取子元素
Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...
- jquery获取当前元素的坐标
jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或 var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...
- jquery获取当前元素坐标
1. jquery获取当前元素坐标 A) 获取对象
- jQuery获取Select元素
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- Knockout获取数组元素索引的2种方法,在MVC中实现
原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...
随机推荐
- 2017-2018-2 《网络对抗技术》20155322 Exp7 网络欺诈防范
[-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实践过程 2.1-简单应用SET工具建立冒名网站 2.2-ettercap DNS spoof 2.3 ...
- PostgreSQL参数学习:deadlock_timeout
磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面:PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页[作者 高健@博客园 luckyjackgao@g ...
- Kubernetes学习之路(十)之资源清单定义
一.Kubernetes常用资源 以下列举的内容都是 kubernetes 中的 Object,这些对象都可以在 yaml 文件中作为一种 API 类型来配置. 类别 名称 工作负载型资源对象 Pod ...
- cogs1685 【NOI2014】魔法森林 Link-Cut Tree
LCT练手好题啊. SPFA的做♂FA是把边按照a排序,然后加一条权值为b的边跑SPFA,不断更新答案.很好的做♂FA,但复杂度无♂FA保证. LCT的做♂FA类似,也是把边按照a排序,然后也是加一条 ...
- h5 和之前版本的区别
html5和之前版本的区别就是:以前版本多采用<tr><td>等标签,对于webapp的开发不是很好把控.H5采用<div>等标签直接进行布局(且多了许多标签功能很 ...
- javaweb学习4——HttpServletRequest的使用
声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...
- 用编程方式编写Babylon格式的宇宙飞船3D模型
使用上一篇文章(https://www.cnblogs.com/ljzc002/p/9353101.html)中提出的方法,编写一个简单的宇宙飞船3D模型,在这篇文章中对模型制作流程和数学计算步骤进行 ...
- 【LeetCode算法题库】Day2:Median of Two Sorted Arrays & Longest Palindromic Substring & ZigZag Conversion
[Q4] There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of th ...
- Linux常规命令总结
Linux常规命令总结,仅供参考: 系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显 ...
- linux的date命令使用指定时间的加减方法与异常
在一般网页里,date命令减时间方法为: date -d '-100 days' 我的需求是,在指定时间上减8小时.按一般理解来看,命令写成如下样子(有异常错误的写法): date -d " ...