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的更多相关文章

  1. jQuery 利用 parent() parents() 寻找父级 或祖宗元素

    $(this).parent().parent().parent().parent().parent().remove(); //此方法通过parent()一级一级往上找   $(this).pare ...

  2. parent,parents和closest

    1.parent parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. <ul id="menu" style="width:10 ...

  3. parent() parents() parentsUntil()三者之间的对比

    $(document).ready(function(){ $("span").parent(); });只拿到span的父级标签 $(document).ready(functi ...

  4. JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法

    在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...

  5. 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  6. jQuery中.parent和.parents的区别

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...

  7. Jquery的parent和parents(找到某一特定的祖先元素)

    关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...

  8. 转：Jquery的parent和parents(找到某一特定的祖先元素)

    Jquery的parent和parents(找到某一特定的祖先元素) 关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则 ...

  9. Jquery中parent()和parents()

    一.parent()方法 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法 此方法取得一 ...

随机推荐

  1. 三分钟学会funsioncharts

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  2. 微信小程序组件-----城市切换

    直接上地址,有需要的直接下载,使用: https://github.com/chenjinxinlove/citySelect

  3. AndroidManifest.xml详解(下)

    本文编辑整理自:http://blog.163.com/hero_213/blog/static/39891214201242835410742/ 八.第三层<activity-alias> ...

  4. 自己动手写Logistic回归算法

    假设一个数据集有n个样本,每个样本有m个特征,样本标签y为{0, 1}. 数据集可表示为: 其中,x(ij)为第i个样本的第j个特征值,y(i)为第i个样本的标签. X矩阵左侧的1相当于回归方程的常数 ...

  5. Unity手撸2048小游戏——自动生成4*4棋盘

    1.新建文件夹,命prefabs,将刚刚做成的Chessman拖入该文件下,做成预制体 2.删除panel下的Chessman 3.在panel下,新建一个空对象,命名为Chessboard,大小设置 ...

  6. linux和android博客链接

    1.Tracy Mcgrady的专栏冰山一角:linux和Android底层开发,主要是mtk系列点击打开链接 2.郁闷Wednesday:嵌入式linux 单片机 android,点击打开链接 3. ...

  7. JavaScript学习笔记（一）：介绍JavaScript的一些简单知识

    JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...

  8. GOLANG 声明

    GO语言声明关键字 var 声明变量 const 声明常量 type 声明新类型 func 声明函数(方法) package 声明包 interface 声明接口

  9. 蚁群算法简介(part 1：蚁群算法之绪论)

    群算法是Marco Dorigo在1992年提出的一种优化算法,该算法受到蚂蚁搜索食物时对路径的选择策略的启示.蚁群算法作为群体智能算法的一种利用分布式的种群搜索策略来寻找目标函数的最优解.蚁群算法与 ...

  10. JS中parseInt()、Numer()深度解析

    JS中字符串转换为数字有两种方式: 1.parseInt函数 定义:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/ ...