从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选可以看出parent的取值很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。下面列出例子说明:

   

例1

  HTML代码如下:

 <div id='div1'>
  <div id='div2'><p></p></div>
  <div id='div3' class='a'><p></p></div>
  <div id='div4'><p></p></div>
</div>

其中:

  $('p').parent()取到的是div2,div3,div4  
  $('p').parent('.a')取到的是div3
  $('p').parent().parent()取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
  $('p').parents()取到的是div1,div2,div3,div4
  $('p').parents('.a')取到的是div3

 
例2
  HTML代码如下:
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test" /></td>
<td>some text</td>
</tr>
</table>

  JQ代码如下:

$(document).ready(function() {
  $("#btn1").click(function(){
    alert($(this).parent().next().html());
  });
});

其中:
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parents()获取的是td,tr,table

大致可以这样理解,这也是个人的一个看法

jquery parent和parents的区别的更多相关文章

  1. jQuery中.parent和.parents的区别

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...

  2. jquery parent()和parents()区别

    parent(exp) 取得一个包含着所有匹配元素的唯一父元素的元素集合. 你可以使用可选的表达式来筛选. 查找段落的父元素中每个类名为selected的父元素. HTML 代码: <div&g ...

  3. jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法

    来自:http://blog.csdn.net/zm2714/article/details/8117746 .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选( ...

  4. jQuery 查找父元素的函数 parent 和 parents 的区别

    函数 描述 parent([expr]) 查找子节点childNode的父节点,不包括祖先节点 parents([expr]) 查找子节点childNode的父节点,包括祖先节点 Talk is ch ...

  5. .parent()和.parents()的区别

    parent的取值很明确,就是当前元素的父元素:parents则是当前元素的祖先元素.下面列出例子说明: 如下: <div id='div1'><div id='div2'>& ...

  6. jquery parent和parents,children和find

    parent返回匹配元素的父元素的元素集合:parents返回匹配元素的祖先元素的元素集合. children返回匹配元素的子元素的元素集合:find返回匹配元素的后代元素的元素集合.

  7. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  8. 前端开发入门到进阶附录一【JQuery中parent(),parents(),parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  9. Jquery的parent和parents(找到某一特定的祖先元素)

    关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...

随机推荐

  1. android开发学习---layout布局、显示单位和如何进行单元测试

    一.五大布局(layout) android中的用五大布局:LinearLayout (线性布局).AbsoluteLayout(绝对布局).RelativeLayout(相对布局).TableLay ...

  2. ios8以后,使用UIAlertViw时pop/push页面后,键盘闪一下的问题

    代码为 UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"感谢你对我们提出的意见或 ...

  3. table的css样式

    经常会遇到table中各种线条重复的问题,画面会显得很难看,下面是解决问题的方法: <!Doctype html><html> <head> <meta ch ...

  4. Centos7 Cacti-0.8.8g安装及SNMP简介

    在官网可以看到关于cacti的下载说明http://www.cacti.net/download_cacti.php Download Cacti The latest stable version ...

  5. MVC+ajax权限管理

    不喜欢说废话,直接了当: 1.控制器 /// <summary> /// 获取列表 /// </summary> /// <returns></returns ...

  6. [转贴]有关Angular 2.0的一切

    对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...

  7. BST、B树、B+树、B*树

    一. BST BST即二叉搜索树Binary Search Tree(又叫二叉排序树Binary Sort Tree).它有以下特点: 所有非叶子结点至多拥有两个儿子(Left和Right): 所有结 ...

  8. [SmartFoxServer概述]使用文档

    如何使用文档和例子 这份文档提供了一份关于如何通过SmartFoxServer 2X(缩写SFS2X)文档掌握要点的快速教程.在使用例子和技术文档之前,我们建议先参考以下主题内容. 不管你是Smart ...

  9. Servlet的几种跳转(转)

    源地址:http://hi.baidu.com/awmtaplnaibmnxq/item/29d76f3dafcf00312e20c482 Servlet: 当然,在servlet中,一般跳转都发生在 ...

  10. 从SQLSERVER/MYSQL数据库中随机取一条或者N条记录

    从SQLSERVER/MYSQL数据库中随机取一条或者N条记录 很多人都知道使用rand()函数但是怎麽使用可能不是每个人都知道 建立测试表 USE [sss] GO ,NAME ) DEFAULT ...