操作jQuery集合搜索父元素

搜索父元素

1.1parents()方法

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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树的多个层级，如下ＨＴＭＬ代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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对象。

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

 

posted @   crystal_C++  阅读(306)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
点击右上角即可分享
微信分享提示