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()方法此方法取得一 ...

随机推荐

以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟
简介正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...
Sprite（精灵）&& 三个特殊的层Layer
用来作为以后复习使用. 1 #include "ScenceScend.h" CCScene* ScenceScend::scene() { CCScene* s = CCScen ...
Unbuntu下使用SVN
一.查看SVN版本 svn --version 二.查看SVN仓库 # 查看被svn仓库占用的所有端口 netstat -anp |grep svn # 查看所有端口对应的仓库 ps -ef | gr ...
java split进行字符串分割
在java.lang包中有String.split()方法,返回是一个数组我在应用中用到一些,给大家总结一下,仅供大家参考: 1.如果用"."作为分隔的话,必须是如下写法,Str ...
Android 软件盘 Editext 问题
显示的问题:android:windowSoftInputMode="adjustPan|stateHidden" 弹出布局Editext并且挤上去 android:windowS ...
渗透杂记-2013-07-13 ms10_061_spoolss
[*] Please wait while the Metasploit Pro Console initializes... [*] Starting Metasploit Console... M ...
Android SDK Tools 更新
C:\WINDOWS\system32\drivers\etc\hosts 文件用记事本打开后添加下面的 74.125.237.1 dl-ssl.google.com
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载) 2015年11月14日| by: nbboy| Category: 系统设计, 缓存设计, 高性能系统摘要 ...
TFS二次开发系列：二、TFS的安装
本系列的实例将采用TFS 2012+Sql Server2012编写. TFS的完整版本安装最好是在Windows server2008 64位以上版本中,其包括64位的SQL SERVER 2012 ...
java简单计算器
写的一个小计算器,留着以后看吧. import java.awt.BorderLayout; import java.awt.Button; import java.awt.Color; import ...

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

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

随机推荐

热门专题