Jquery的parent和parents(找到某一特定的祖先元素)用法(转发:https://blog.csdn.net/cui_angel/article/details/7903704)
<!--
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。 parent取得很明确就是当前元素的父元素
parents则是当前元素的祖先元素
-->
<html>
<head></head>
<body>
<div id="div1">
<div id="div2"><p></p></div>
<div id="div3" class="a"><p></p></div>
<div id="div4"><p></p></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("p").parent(); //取得的是div2、div3、div4
$('p').parent('.a'); //取得是div3
$('p').parent().parent(); //取得是div1(这点比较奇特,不过Jquery对象本身的特点决定了这是可行的)
$('p').parents(); //取得的是div1、div2、div3、div4
$('p').parents('.a'); //取得的是div3
</script>
</html>
<body>
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test"/></td>
<td>some text</td>
</tr>
</table>
</body>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
打印结果:some text
其中:
1、this.parent() 获取的是input前面的td;
2、this.parent().parent() 获取的是tr;
3、this.parent().parent().parent() 获取的是table;
4、this.parent().next() 获取的是input前面的td相邻的另一个td。
另一个例子中:
<div>
<p>Hello</p>
<p>Hello</p>
</div>
$('p').parent() 得到的是:<div><p>Hello</p><p>Hello</p></div>对象,因为p标签的父标签是div
有关parents
<div id="one">
<div id="Two">hello</div>
<div id="Three">
<p><a href="#">tonsh</a></p>
</div>
</div>
$("a").parent() 将会得到父对象<p>
$("a").parents() 得到父对象<p><div.3><div.1>
$("a").parents().filter("div") 将得到<div.3><div.1> 还可以写成$("a").parents("div")。
如果想得到<div.2>对象可以写成这样:$("a").parents("div:eq(0)")。
如果点击<a>链接时弹出<div.2>中的内容该怎么办?
var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();
alert(id);
Jquery的parent和parents(找到某一特定的祖先元素)用法(转发:https://blog.csdn.net/cui_angel/article/details/7903704)的更多相关文章
- Jquery的parent和parents(找到某一特定的祖先元素)用法
<!-- parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选. ...
- 转:Jquery的parent和parents(找到某一特定的祖先元素)
Jquery的parent和parents(找到某一特定的祖先元素) 关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则 ...
- Jquery的parent和parents(找到某一特定的祖先元素)
关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...
- Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】
<html> <head> <script type="text/JavaScript" src="jQuery-1.5.1.min.j ...
- 前端开发入门到进阶附录一【JQuery中parent(),parents(),parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
- Jquery中parent()和parents()
一.parent()方法 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法 此方法取得一 ...
- jQuery中.parent和.parents的区别
.parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...
- jQuery的parent和parents和closest区别
1.parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.2.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选.3.clo ...
- jQuery通过parent()和parents()方法访问父级元素
<div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...
随机推荐
- Javascript 客户端实时显示服务器时间
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- jetty学习小结
1.什么是jetty? 开源HTTP服务器和Servlet引擎,是web应用的容器,同tomcat类似.由于其轻量灵活的特性,很多知名产品也应用了它,如maven.eclipse.hadoop.spa ...
- 【SpringMVC学习08】SpringMVC中实现文件上传
之前有写过一篇struts2实现的文件上传,这一篇博文主要来总结下springmvc实现文件上传的步骤.首先来看一下单个文件的上传,然后再来总结下多个文件上传. 1. 环境准备 springmvc上传 ...
- 01-2制作U盘启动盘--装机助理工具
在可以上网的电脑上执行制作启动盘的操作: 打开浏览器输入:http://www.zhuangjizhuli.com/upan.html 1.制作U盘启动盘: 2.下载 装机助理 软件 3.步骤: 第一 ...
- Atitit..jdk java 各版本新特性 1.0 1.1 1.2 1.3 1.4 1.5(5.0) 1.6(6.0) 7.0 8.0 9.0 attilax 大总结
Atitit..jdk java 各版本新特性 1.0 1.1 1.2 1.3 1.4 1.5(5.0) 1.6(6.0) 7.0 8.0 9.0 attilax 大总结 1.1. Java的编年史2 ...
- 从头认识Spring-2.4 基于java的标准注解装配-@Inject-限定器@Named
这一章节我们来讨论一下基于java的标准注解装配标签@Inject的限定器@Named. 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_s ...
- windows 下 Rabbitmq 配置远程访问
1.运行-->CMD 2.定位到Rabbitmq 安装路径下的 sbin目录,执行 :rabbitmq-plugins enable rabbitmq_management 3.登录web控制台 ...
- appium mac 下 安装及踩坑
Appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS.Android及FirefoxOS平台.Appium使用WebDriver的json ...
- 3s 简介
"3S"技术是英文遥感技术(Remote Sensing RS).地理信息系统(Geographical information System GIS).全球定位系统(Global ...
- userdel命令
userdel 功能:删除用户相关文件:/etc/passwd /etc/shadow /home/usernameuserdel [-r] username 常用参数:-r 连同家 ...