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

   

例1

  HTML代码如下:

  1. <div id='div1'>
  2.   <div id='div2'><p></p></div>
  3.   <div id='div3' class='a'><p></p></div>
  4.   <div id='div4'><p></p></div>
  5. </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代码如下:
  1. <table>
  2. <tr>
  3. <td><input id="btn1" class="btn" type="button" value="test" /></td>
  4. <td>some text</td>
  5. </tr>
  6. </table>

  JQ代码如下:

  1. $(document).ready(function() {
  2.   $("#btn1").click(function(){
  3.     alert($(this).parent().next().html());
  4.   });
  5. });

其中:
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. DNA Pairing

    function pair(str) { //return str; var arr = str.split(''); var pait = ''; var result = arr.map(func ...

  2. shell脚本实现数据库自动备份和删除备份

    为了安全起见,我们每天都需要备份数据库,但是备份数据库的时间往往是在凌晨左右,大家都休息,没人使用的时候,这样我们就需要linux系统实现自动备份,即定时自动执行脚本.但是我们又不能让所有的备份一直保 ...

  3. canvas写的一个刮奖效果

    <!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...

  4. VS2015 建立C++ dll库文件

    最近在写一个图片处理,正好用到C++封装DLL给C#调用,一下是总结:   建立一个C++的Win32DLL,这里要注意选择"Export symbols"导出符号.点击完成. 如 ...

  5. SQlserver 行转列

    列转行编程中很容易碰到,小弟在此总结下, 行转列暂时还没遇到,遇到再补充. 列转行:  , , , ,  以上都是以逗号分隔,分隔符可以自定义.

  6. SpringMVC+MyBatis项目分析与开发实例

    一.用到的Jar包 <!-- ************ Spring测试包 ************* --><artifactId>spring-test</artif ...

  7. tesseract-ocr 出现 错误 Please make sure the TESSDATA_PREFIX environment variable is set to the parent d irectory of your "tessdata" directory.解决方案

    简单就是说把tessdata拷贝到exe的所在目录,或者设置TESSDATA_PREFIX环境变量

  8. php实现验证码

      验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...

  9. 图层的核心动画(CABaseAnimation)

    Main.storyboard // //  ViewController.m //  7A14.图层的核心动画 // //  Created by huan on 16/2/4. //  Copyr ...

  10. 【Visual Lisp】Visual Lisp属性与方法

    说明:Visual Lisp属性的获取.赋值和方法的执行有多种形式.然而对于初学者来说一次性就要全部掌握显然是没有必要的,有时候每种方法都是通用的功能都一样我们就没有必要把所有方法都记住.我们只需要掌 ...