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 ...
随机推荐
- 20155327实验一 Java开发环境的熟悉
20155327实验一 Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的java程序 2.使用IDEA编辑.编译.运行.调试java程序 实验步骤 1.使用JDK编译.运行简单的jav ...
- 19-[JavaScript]-DOM
1.DOM操作 在JS中,所有的事物都是节点,元素.文本等都是节点. 应用场景:可以通过节点进行DOM对象的增删改查 (1)获取DOM节点的方法 //通过id获取,唯一的 var oDiv = doc ...
- (转载)jQuery判断checkbox是否选中的3种方法(个人用第二种方法)
方法一: if ($("#checkbox-id")get(0).checked) { // do something } 方法二: if($('#checkbox-id' ...
- 在云服务器搭建WordPress博客(一)实现云服务器与域名的绑定
随着云的兴起,越来越多的人选择在云服务器上搭建自己的博客,比较著名的开源博客管理系统当属WordPress了,那么怎么在服务器上搭建WordPress呢? 我们需要让别人能够访问我们的博客,就比如输入 ...
- SpringBoot日记——日志框架篇
在项目的开发中,日志是必不可少的一个记录事件的组件,所以也会相应的在项目中实现和构建我们所需要的日志框架. 而市面上常见的日志框架有很多,比如:JCL.SLF4J.Jboss-logging.jUL. ...
- 使用efwplusScript开发Winform程序【像小程序那样开发PC软件】
一.前言 本人从事多年医疗管理软件的开发,在医院大多数的软件都还是CS程序,BS程序很少,对于使用者来说CS的操作体验确实比BS的要好. 1.CS的缺点就是升级麻烦,每次有新版本都需要所有客户端操作升 ...
- 大话 .Net 之内存管理
在一次偶然的机会中,我来到了恒生的大家庭.又在一次偶然的机会中,我很荣幸的被勇哥信任并让我写一篇季刊的文章.可能人生之中充满了无数次的偶然机会,我们只有抓住眼前的“偶然”,才可以创建人生.当我接到这个 ...
- allure2 report+ jenkins 使用
物色了一个挺漂亮的报告生成插件 ——allure. 下面介绍一下这个报告的使用. 1. 添加依赖 <dependencies> <!-- https://mvnrepository. ...
- java查询几个菜单下的所有下级菜单
需求: 假如有几个一级菜单,一级菜单下面有几个二级菜单,二级菜单下又还有三级菜单.现在要求一级菜单里面的几个设置为无效,将不显示在前端.现在需要的是查询出一级菜单下面所有的菜单,包括二级,三级菜单 原 ...
- Java子类初始化调用父类无参构造
实在是服了自己,子类初始化调用父类无参构造这种初学者都应该知道的事,我给忘了. 记得当初看书的时候各种概念抄在笔记本上,再上机实践,以为一辈子都不会忘,还是给忘了. 这件事说明了两个问题: 1.我没有 ...