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获取父元素或父节点的方法的更多相关文章

  1. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  2. jquery获取html元素的绝对位置和相对位置

    jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...

  3. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  4. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  5. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  6. jquery获取当前元素坐标

    1. jquery获取当前元素坐标 A) 获取对象

  7. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  8. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  9. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  10. Knockout获取数组元素索引的2种方法,在MVC中实现

    原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...

随机推荐

  1. 2018下学期C语言学习总结

    怎么说呢,2018年下学期已经过去了,2019年的上学期又来了,在2018年没有达到自己想要的结果,希望2019年可以达到,加油!我希望我以后可以又快又准确的完成C语言的编程,学习好所以关于电脑的基础 ...

  2. 5 功能4:个人站点页面设计(ORM跨表与分组查询)

    1.个人站点页面文章的查询 # 个人站点 http://www.cnblogs.com/wh1520577322/ http://www.cnblogs.com/liucong12345/ http: ...

  3. [VB.NET][C#]WAV格式文件头部解析

    简介 WAV 为微软开发的一种声音文件格式,它符合 RIFF(Resource Interchange File Format)文件规范,用于保存 Windows 平台的音频信息资源. 第一节 文件头 ...

  4. async/await工作机制探究--NodeJS

    ES6中的async/await让Promise变得更加简便,通常await处理的链式Promise会包裹在函数中,返回结果仍然是一个Promise对象. 但是当await直接处理链式Promise时 ...

  5. Linux入门基础(七):Linux软件管理基础

    源代码形式 绝大多数开源软件都是直接以源代码形式发布 源代码一般会被打包成tar.gz的归档压缩文件 程序源代码需要编译成为二进制形式之后才能够运行 源代码基本编译流程 : ./configure 检 ...

  6. 快速稀疏角点光流框架(Fast sparse corner optical flow framework)

    光流适用在连续的图像系列(视频流)中,描述本身或画面目标的运动状态:在目标跟踪.运动分析.甚至slam中都有广泛应用. opencv里就有不少光流算法,其中很经典也是当前被调用最多的的Lucas-Ka ...

  7. [Unity Shader] 切线空间的法线贴图

    切线空间的法线贴图,可以这样理解: #纹理坐标是从0到1,它的坐标是x向右,y向下 #顶点坐标是从-1到-1,坐标是x向右,y向上 1 由表面上某点的切线Tangent.副切线Bitangent.法线 ...

  8. Python3中isdigit(), isdecimal(), isnumeric()的区别和字符串的常用方法

    # 全部小写 string.lower() # 全部大写 string.upper() # 是否全部小写 string.islower() # 是否全部大写 string.isupper() # 首字 ...

  9. 零基础学python之入门和列表数据(附详细的代码解释和执行结果截图)

    Python学习笔记 1 快速入门 下载安装好Python之后,在开始找到 双击打开一个窗口,这是一个shell界面编辑窗口,点击左上角的file——new file新建一个窗口,这里可以输入完整的代 ...

  10. 简单3D翻页相册制作教程

    3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...