jQuery查找——parent/parents/parentsUntil/closest

jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素，具体用法不同

parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents()：沿 DOM 树向上遍历，直到文档的根元素(<html>)为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回零个、一个或多个元素。

closest()：沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。返回零个或一个元素

parentsUntil()：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，但不包括那个选择器匹配到的元素。跟parents类似，区别是不会查到根元素，遇到匹配的就停止了，同时不包括匹配到的那个元素。

注：这四个选择器都返回一个数组，且为jQuery对象；但数组中的元素都不是jQuery对象，需要再次封装它们才能使用Jquery提供的API

-----------------------------------------------------------------测试-----------------------------------------------------------------

基础代码：

注：下面的测试会用$().css()进行测试，css()是jQuery的函数。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

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

         <script>

             $(function(){

                 //jquery

             });

             function changeColor(a){

                 //changeColor

             }

         </script>

     </head>

     <body>

         <ul class="level-1 yes">

             <li class="item-i">I</li>

             <li class="item-ii">II

                 <ul class="level-2 yes">

                     <li class="item-a">A</li>

                     <li class="item-b">B

                         <ul class="level-3">

                             <li class="item-1">1</li>

                             <li class="item-2">2</li>

                             <li class="item-3">3</li>

                             <li class="item-3"><a href="javascript:;" onclick="changeColor(this);">改变颜色</a></li>

                         </ul>

                     </li>

                     <li class="item-c">C</li>

                 </ul>

             </li>

             <li class="item-iii">III</li>

         </ul>

     </body>

 </html>

效果图：

一、parent()

1.表达式为空，会选择上一级元素(唯一父级)。即<ul class="level-3">...</ul>

$("li.item-1").parent().css("border", "3px solid blue");

2.使用表达式选择(直接父级)：跟上图效果一样。

$("li.item-1").parent(".level-3").css("border", "3px solid blue");

3.使用表达式选择(非直接父级)：没有效果

$("li.item-1").parent(".level-1").css("border", "3px solid blue");

4.选择多个：选择所有li的直接父级

$("li").parent().css("border", "3px solid blue");

5.根据表达式选择多个：选择li的直接父级且class="level-2"，这里其实可以看做先选择了所有li的父级，然后筛选出class='.level-2'的父级

$("li").parent(".level-2").css("border", "3px solid blue");

6.改变颜色：将<li class="item-b"></li>的边框变为红色，从<a>开始向上查找，只能一级一级地往上找到要匹配的元素。

$("a").parent().parent().parent().css("border", "3px solid red");

7.点击改变颜色：设置<li class="item-b"></li>的边框为红色。效果跟上图一样。

function changeColor(a){

    $(a).parent().parent().parent().css("border", "3px solid red");

}

8.将parent()返回数组的第一个元素的边框设置为红色：

选择li的父标签ul:这里返回3个元素

$("li").parent("ul").css("border", "3px solid blue");

代码如下：颜色不变，效果跟上面一样。使用的是rets[0].css()。

$("li").parent("ul").css("border", "3px solid blue");

var rets = $("li").parent("ul");

rets[0].css("border", "3px solid red");

颜色改变：这里包装了第一个元素，与上面的对比说明：parent()返回的数组的元素不是jQuery对象。

$("li").parent("ul").css("border", "3px solid blue");

var rets = $("li").parent("ul");

$(rets[0]).css("border", "3px solid red");

二、parents()

1.无表达式：沿DOM树向上遍历，直到文档的根元素(</html>)为止，可以看到逐级向上选择所有的父级元素。

$("li.item-1").parents().css("border", "3px solid blue");

2.表达式：选择class="yes"的父级。注意这里实际上是，将每个祖先元素先添加到一个临时的集合，然后根据表达式对这个集合进行筛选。parents()相当于是可以跳级选择。

$("li.item-1").parents(".yes").css("border", "3px solid blue");

3.点击改变颜色：设置<li class="item-b"></li>边框颜色为红色，可以直接选取该元素进行操作.

function changeColor(a){

    $(a).parents(".item-b").css("border", "3px solid red");

}

4.将数组中的第一个元素边框设置为红色：

选择的元素：返回的数组中有三个元素。

$("li.item-1").parents("ul").css("border", "3px solid blue");

将数组中的第一个元素边框设置为红色：使用的是rets[0].css()，效果跟上图一样，没有任何改变。

$("li.item-1").parents("ul").css("border", "3px solid blue");

var rets = $("li.item-1").parents("ul");

rets[0].css("border", "3px solid red");

将数组中的第一个元素边框设置为红色：包装后在操作：$(rets[0]).css()，颜色改变。

同上面的对比说明：parents()返回的数组中的不是jQuery对象。

$("li.item-1").parents("ul").css("border", "3px solid blue");

var rets = $("li.item-1").parents("ul");

$(rets[0]).css("border", "3px solid red");

三、parentsUntil()

1.无表达式：因为没有表达式，效果跟无表达式的parents()一样，沿DOM树向上遍历，直到文档的根元素(<html>)为止

$("li.item-1").parentsUntil().css("border", "3px solid blue");

2.表达式：

层级关系：<li class="item-1"> -- <ul class="level-3"> -- <li class="item-b"> -- <ul class="level-2 yes">

这里从item-1往上找level-2，可以看出，level-2没有被选中，被选中的是item-1的父级level-3和item-b。

所以，parentsUntil()查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，但不包括那个选择器匹配到的元素。跟parents类似，区别是不会查到根元素，遇到匹配的就停止了，同时不包括匹配到的那个元素。

所以，如果你想用parentsUntil()直接查找某个元素是不行的，可以用parents()。

这里要注意：parentsUntil()返回的是一个数组，而不是单个对象。parentsUntil返回的数组中刚好不包括满足表达式条件的对象。感觉这两点很容易让人误解。

$("li.item-1").parentsUntil(".level-2").css("border", "3px solid blue");

3.表达式：这里可以看做，先选择了level-2下的所有父级元素(即level-3，item-b)，然后再筛选出level-3

$("li.item-1").parentsUntil(".level-2",".level-3").css("border", "3px solid blue");

4.点击改变颜色：将item-b下的a的父级的边框都改变了，但不包括item-b本身。

function changeColor(a){

     $(a).parentsUntil(".item-b").css("border", "3px solid red");

}

6.将数组中第一个元素边框设置为红色：

选择元素：返回的数组中有4个元素。

注意：如果这里这样选择$("li.item-1").parentsUntil("ul")，是不会选中任何元素的。这里应该和parents()相区别。

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");

改变第一个元素的边框颜色：这里使用的是parents[0]。效果跟上图一样，没有变！！

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");

var parents = $("li.item-1").parentsUntil("ul.level-1");

parents[0].css("border", "3px solid red");

将数组中的元素包装后的效果：这里使用的是$(parents[0]).css()。

同上面的对比，说明parentsUntil()返回的数组中的元素不是jQuery对象。

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");

var parents = $("li.item-1").parentsUntil("ul.level-1");

$(parents[0]).css("border", "3px solid red");

四、closest()

1.无表达式：没有表达式是不会选择任何元素的。因为closest()是从当前元素开始沿DOM 树向上，获得匹配表达式的第一个祖先元素，返回0个或者一个元素。

$("li.item-1").closest().css("border", "3px solid blue");

2.表达式：查找<ul class="level-2 yes">。我想这就是我们会常用的功能了。跟parents()类似，但parents返回的是数组。注意和parents的区别

$("li.item-1").closest("ul.level-2").css("border", "3px solid blue");

总结：一般来说用closest()和parents()就够了！parentsUntil()容易让人误解为只选择一个元素...

jQuery查找——parent/parents/parentsUntil/closest的更多相关文章

jQuery 利用 parent() parents() 寻找父级或祖宗元素
$(this).parent().parent().parent().parent().parent().remove(); //此方法通过parent()一级一级往上找 $(this).pare ...
parent,parents和closest
1.parent parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. <ul id="menu" style="width:10 ...
parent() parents() parentsUntil()三者之间的对比
$(document).ready(function(){ $("span").parent(); });只拿到span的父级标签 $(document).ready(functi ...
JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法
在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...
前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
jQuery中.parent和.parents的区别
.parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...
Jquery的parent和parents(找到某一特定的祖先元素)
关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...
转：Jquery的parent和parents(找到某一特定的祖先元素)
Jquery的parent和parents(找到某一特定的祖先元素) 关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则 ...
Jquery中parent()和parents()
一.parent()方法此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法此方法取得一 ...

随机推荐

移动端页面去掉click点击背景色变化
a,input,em,h2{-webkit-tap-highlight-color:rgba(255,0,0,0);}给点击元素加上样式 :-webkit-tap-highlight-color:rg ...
UNIX网络编程卷1 第一章简介读书笔记。
基本没讲什么,一点点计算机网络发展史,一点点socket()简单介绍,最重要的是1.3节协议无关性. 协议无关性: 贯穿整本书的一个重要特性,他主要强调的是 socket是网络协议无关的编程接口. s ...
Nginx与Lua利用fpm打成rpm包
1.下载相关软件需要软件有:Nginx,LuaJIT,ngx_devel_kit,ngx_lua等安装文件安装Lua或者LuaJIT都是可以的,但是出于效率的考虑,推荐安装LuaJITshell& ...
PowerShell脚本自动设置安卓手机wifi代理
在实际测试工作中,经常要将安卓手机通过wifi代理的形式连接到本机的fiddler或charles服务器代理进行抓包测试.最近一直在想,有没有什么方法可以自动设置安卓手机的wifi代理,曾经想通过修改 ...
19-ES6（2）
Promise 概念所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 特点对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种 ...
linux的三种安装软件包的方式（小白的学习之旅）
tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...
获取div或者元素相对于屏幕坐上角的绝对位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
通过nginx代理之后，获取客户端ip
1.相关nginx配置(通过header将客户端ip,host等信息传入) location ~ .*.do$ { proxy_set_header X-Real-IP $remote_addr; p ...
ActivityManagerService是如何启动app
ActivityManagerService是如何启动app 一．上一篇文章app的启动过程,说明了launcher启动app是通过binber,让ActivityManagerServi ...
Google Maps地图投影全解析(3)：WKT形式表示
update20090601:EPSG对该投影的编号设定为EPSG:3857,对应的WKT也发生了变化,下文不再修改,相对来说格式都是那样,可以到http://www.epsg-registry.or ...

jQuery查找——parent/parents/parentsUntil/closest

jQuery查找——parent/parents/parentsUntil/closest的更多相关文章

随机推荐

热门专题