操作jQuery集合搜索父元素

搜索父元素

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树的多个层级,如下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").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对象。

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

时间: 2024-08-12 01:29:13

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

JQuery中查找父元素,子元素,追加元素,插入元素和删除元素

Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $('*')  匹配页面所有元素 $('#id') id选择器 $('.class') 类选择器 $('element') 标签选择器 $('E[attr]') 含有属性attr的元素E $('E[attr=value]') 属性attr=value的元素E JQuery中查找父元素 .closest

jquery js 兄弟父元素的获取

jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点 children(selector) 返回所有的子节点,不过该方法只会返回直接的子节点,不会返回所有的子孙节点 prev() 返回该节点的上一个兄弟节点 prevAll() 返回该节点之前所有的节点 next()

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

使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素

此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素 取得一个包含着所有匹配元素的唯一父元素的元素集合,你可以使用可选的表达式来筛选: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' c

[ jquery 过滤器 parents(expr) ] 此方法用于在选择器的基础之上搜索被选元素沿着父元素链找到符合参数的那个父元素,完成需求,如果没有参数,他会一直沿着父元素链解析到 html 标签

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素 "!DOCTYPE html").可以通过一个可选的表达式进行筛选 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords

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

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点

jQuery实战:创建元素包装集,选择将被操作的元素

看完你能学到什么? 1.利用基本CSS选择器 2.利用子选择器.容器选择器和特性选择器 3.通过位置选择 4.利用自定义jQuery选择器 几乎使用任何jQuery方法的时候,我们必须做的第一件事,就是选择将被操作的页面元素.有时,想要选择的元素集合是易于描述的,例如"页面上的所有链接元素".有时,需要比较复杂的描述,比如"拥有CSS类leftchild的偶数的段落 ". 庆幸的是,jQuery提供了健壮的选择器语法,让我们能轻松,优雅和简明地指定几乎人和元素集合.

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> <li><a href="#">jquery获取父元素&l

jQuery操作iframe子页中元素代码实例

jQuery操作iframe子页中元素代码实例:本章节介绍一下如何在父页面中操作iframe子页面中的元素,希望能够给需要的朋友带来一定的帮助.一.父页面代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <