通过选择器一般只能获取指定标识的节点，或者获取子节点。

有些场景下，往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。

1、parent方法

该方法可以获取元素的直接父节点。

我们还是通过例子来说明

<div>
 <p id="pid"></p>
 <span class="cspan"></span>
 <div>
  <a id="aid"></a>
  <span>test</span>
 </div>
</div>

js代码如下

var obj = $("#aid").parent(); //获取到的是aid元素的直接父节点div元素
  alert(obj.html());

可以指定parent方法的参数，如 $("#aid").parent("div") 来检查父节点是否满足特定的条件。

2、parents方法

该方法可以获取元素所有上层节点（直到根节点）的集合。如：

<html>

<body>

<div class="mydiv">
 <p id="pid"></p>
 <span class="cspan"></span>
 <div>
  <a id="aid"></a>
  <span>test</span>
 </div>
</div>

</body>

</html>

js代码

var obj = $("#aid").parents(); //一共获得4个父节点，div>div>body>html
  obj.each(function(index,data){
   alert($(data).prop("tagName"));
  });

可以通过给parents方法加参数来有条件的选择父节点。

如 $("#aid").parents("div") 只返回节点标签为DIV的 上层节点集合。

如 $("#aid").parents(".mydiv")  只返回节点包含样式mydiv 的 上层节点集合。

3、小结

通过上面两个方法，加上各种条件设置，可以获取到各种条件的上层节点。

Jquery学习笔记：利用parent和parents方法获取父节点的更多相关文章

  1. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  2. jQuery通过parent()和parents()方法访问父级元素

    <div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...

  3. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  4. jQuery学习笔记之插件开发（4）

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  5. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  6. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  7. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  8. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  9. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

随机推荐

  1. BCS--设置BDC元数据存储权限--访问被业务数据拒绝

    设置元数据存储权限 http://blog.163.com/liangshan_wei@126/blog/static/8297850320139126930290/

  2. ADO.NET基础笔记

    ADO.NET 程序要和数据库交互要通过ADO.NET进行,通过ADO.Net就能在程序中执行SQL了. ADO.Net中提供了对各种不同的数据库的统一操作接口. 连接字符串: 程序通过连接字符串指定 ...

  3. html5之histroy浅析

    history是HTML5的新特性,我们可以使用它操作这个历史记录堆栈. (1)history提供了对浏览器历史纪录堆栈的读取,同时实现在访问记录中的前进和后退: history.length 历史记 ...

  4. 远程读取URL 建议用curl代替file_get_contents

    初学php的朋友们,很容易翻一个错误,在写采集程序或者调用api接口总会有线考虑到使用file_get_contents函数来或许内容,程序的访问量不大倒是没什么影响,但是访问量提升了那非常的悲剧了, ...

  5. android linearlayout imageview置顶摆放

    在练习android时,想在Linearlayout内放一图片,使其图片置顶,预期效果是这样的: 但xml代码imageview写成这样后, <ImageView android:layout_ ...

  6. codeblocks快捷键及设置

    ==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小.• 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling.• Ctr ...

  7. X Window System介绍

    1.概述     X Window System是1984年由麻省理工学院(MIT)和DEC公司共同开发研究的,是执行在UNIX系统上的视窗系统.严格地说,X Window System并非一个软件, ...

  8. hdu 4737

    题目链接 直接暴力,或运算只会越来越大 #include <cstdio> #include <cstring> using namespace std; #define N ...

  9. 循环次数（ M - 暴力求解、打表）

    循环次数 Description           我们知道,在编程中,我们时常需要考虑到时间复杂度,特别是对于循环的部分.例如,         如果代码中出现         for(i=1;i ...

  10. [Swust OJ 541]--排列字典序问题

    题目链接:http://acm.swust.edu.cn/problem/0541/ Time limit(ms): 2000 Memory limit(kb): 65535 n个元素{1,2,... ...