搜索父元素

1.1parents()方法

parents()方法用于获取u当前匹配元素集合中的每个元素的祖先元素，根据需要还可以使用一个选择器进行筛选parents([selector])

其中selector参数是可选的，表示用来筛选的表达式，即查找祖先元素可以满足的筛选条件。如未提供该参数，则返回每个匹配元素所有的祖先元素，如以下HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

	$(function(){

			   $('p').parents().css("border","1px solid #F00");

			   });

</script>

</head>

<body>

	<div style="width:300px;height:150px;">

    	<div style="width:200px;height:100px;margin-top:10px;margin-left:30px;">

        	<p>给祖先元素添加边框样式</p>

        </div>

    </div>

</body>

</html>

p的祖先元素为俩个div和body元素

1.2closest()方法

closest()方法是jQuery1.3版本中新增的，该方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素，语法格式closest(selector,[context])

其中参数selector是一个包含选择器表达式的字符串或字符串数组，用于指定元素的匹配条件，参数context是可选的，指定一个DOM元素，可以在其中找到匹配元素

该方法首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素一层一层往上，知道找到匹配选择器的元素，如果什么也没找到则返回一个空的jQuery对象。

例如HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

	$(function(){

			   $('a').closest("div").css("border","2px solid #F00");

			   /*执行该代码以后，将改变id为firstdiv的div元素的边框样式，因为它是向上遍历DOM树遇到的

		第一个匹配元素

		*/

			   });

</script>

</head>

<body>

	<div id="maindiv">

    	<div id="firstdiv">

        	<a>CLOSEST()方法</a>

        </div>

    </div>

</body>

</html>

1.3parent()方法

parent()方法用于获取当前匹配元素集合中每个元素的父元素，根据需要还可以使用一个选择器进行筛选，语法格式：parent([selector])

其中参数selector是可选的表示用来筛选的表达式

parent()与parents方法累世，只不过前者只遍历了DOM树的一个层级，而后者可遍历DOM树的多个层级，如下ＨＴＭＬ代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

	$(function(){

			  $("p").parent().css("border","1px solid blue");

			  //执行代码将改变id=divtop的div边框样式

			   });

</script>

</head>

<body>

	<div style="widht:300px;height:150px;" id="div_main">

    	<div id="div_top" style="width:200px;height:100px;margin-top:10px;margin-left:30px;">

         	<p>给父元素添加边框样式</p>

        </div>

    </div>

</body>

</html>

1.4parentsUntil()方法

parentsUntil()方法用于获取当前匹配元素集合中每个元素的祖先元素，直到给定选择器匹配的元素，语法格式：parentsUntil([selector])

其中，参数selector是可选的，其值是一个包含选择器的表达式字符串，用来匹配元素的祖先，HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

	$(function(){

			 $("#sonullisecond").parentsUntil("secondli").css("background","red");

			 //找到#sonullisecond到祖先元素secondli之间的元素，并为这些元素添加背景

			   });

</script>

</head>

<body>

	<ul id="ul_first">

		<li id="firstli">firstli</li>

        <li id="secondli">

        	<ul id="sonul">

            	<li id="sonullifirst">sonullifirst</li>

                <li id="sonullisecond">sonullisecond</li>

            </ul>

        </li>

        <li id="thirdli">thirdli</li>

    </ul>

</body>

</html>

1.5offsetParent()方法

offsetParent()方法用于搜索第一个匹配元素的已定位的父元素，仅对可见元素有效，语法格式：offsetParent()

该方法查找第一个匹配元素的已定位元素，并返回由该元素包装成的jQuery对象。

下面举例说明如何在文档中获取指定元素的祖先元素和父元素

操作jQuery集合搜索父元素的更多相关文章

  1. JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  2. 3.操作jQuery集合《jquery实战》

    3.1 创建HTML元素 使用 jquery 创建动态元素是相当容易的.可以通过 $() 函数包含一个 HTML 标签的字符串来创建. $('<div>Hello</div>' ...

  3. jQuery 实战读书笔记之第三章：操作 jQuery 集合

    创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...

  4. jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...

  5. jquery 获取所有父元素

    最终结果: 代码: <!DOCTYPE html> <html> <head> <style> b, span, p, html body { padd ...

  6. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  7. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

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

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

  9. jQuery中兄弟元素、子元素和父元素的获取

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

随机推荐

  1. 设计模式Adapter模式的五分钟

    五分钟一个设计模式.来形容叙述的设计模式的最简单方法.看到许多其他设计模式,请点击五分钟一个设计模式系列 http://blog.csdn.net/daguanjia11/article/catego ...

  2. Service Manager流程，派BC_REPLY，唤醒FregServer流程，返回BR_TRANSACTION_COMPLETE，睡眠等待proc-&gt;wait

    本文參考<Android系统源代码情景分析>,作者罗升阳 一.service manager代码:        -/Android/frameworks/base/cmd/service ...

  3. T-SQL问题解决集锦——数据加解密（2）

    原文:T-SQL问题解决集锦--数据加解密(2) 问题三.如何让指定用户可以对数据表进行Truncate操作? Truncate在对大表全删除操作时,会明显比Delete语句更快更有效,但是因为它不需 ...

  4. SPOJ 15. The Shortest Path 堆优化Dijsktra

    You are given a list of cities. Each direct connection between two cities has its transportation cos ...

  5. AM335x(TQ335x)学习笔记——u-boot-2014.10移植

    根据最近移植u-boot-2014.10至TQ335x,基于这样的假设am335x evm移植.不是很多地方需要改变. 因为TI的am335x evm开发了使用eeprom船上保存配置信息.它使用不同 ...

  6. 新建WindowsPhone项目时提示未将对象引用设置到对象的实例

    问题: 安装好新系统之后(只有Windows8 专业版和企业版支持hyper-v),然后安装vs2012,再安装Wp8 Sdk,安装完毕后新建Windows Phone项目,会提示未将对象引用设置到对 ...

  7. php脚本生成google play url的下载链接，下载apk并自动反编译后获取android版本号

        需求:     get the offer tracking link    follow the redirect to get google play url    Go to http: ...

  8. netfilter/iptables 结构要点

    转载请注明:http://blog.csdn.net/yeasy/article/details/44311169 四张表,每一个表有若干链. filter INPUT(路由表决策后,到本机的进程) ...

  9. 2年SQL Server DBA调优方面总结

    原文:2年SQL Server DBA调优方面总结 2年SQL Server DBA调优方面总结 当2年dba 我觉得,有些东西需要和大家分享探讨,先书单. 书单 1.<深入解析SQL Serv ...

  10. 用Maven打包成EAR远程部署JBoss（二）——部署到远程JBoss

    用Maven打包成EAR远程部署JBoss(一)讲了如何使用Maven打包,可是在文章的最后也留下了一个问题,那就是如何将包部署到远程的JBoss中呢?近期在对之前的学习进行总结,发现少了这样一篇重要 ...