jquery parents()和closest()用法与区别介绍

来源：http://www.111cn.net/wy/jquery/46871.htm多谢分享

例1

代码如下	复制代码
<ul class="box" name="a">     <li name="b" class="li_moito"><p><a href="#" class="moto">Hello Moto</a></p></li> </ul>

 
如果要获取class="moto"的父级元素LI，可以用$(".moto").parent().parent()。但是比较繁琐，实想要获取父级标签还有另外两种方法的，即parents()与closest()。

 
parents()方法：

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。parents()，我想这个大家再熟悉不过了，它是取得所有符合条件的祖先元素（不包括本身），这是一个集合。

这里，我们可以：

代码如下	复制代码
$(".moto").parents("li[name='b']"); 或者 $(".moto").parents(".li_moito");

。.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。

请思考这个带有基本的嵌套列表的页面：

代码如下

复制代码

<ul class="level-1">   <li class="item-i">I</li>   <li class="item-ii">II     <ul class="level-2">       <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>         </ul>       </li>       <li class="item-c">C</li>     </ul>   </li>   <li class="item-iii">III</li> </ul>

如果我们从项目 A 开始，则可找到其祖先元素：

代码如下	复制代码
$('li.item-a').parents().css('background-color', 'red');

closest()方法：

closest()，这个方法呢就是向上检查元素并逐级匹配。首先，会从自身来匹配，匹配成功就返回本身；不成功则向上寻找，直到找到匹配的选择器为止。如果没有则返回空对象。

可以这样写：

代码如下	复制代码
$(".moto").closest("li[name='b']"); 或者 $(".moto").closest(".li_moito");

closet(selector,context)中context参数的用法 从当前元素开始遍历到context元素结束，若不存在context参数遍历到根结点由此可见使用context参数可以提高查询效率！

代码如下	复制代码
var listItemII = document.getElementById('ii'); //Item-II //var listItemII=$(‘#ii'),这个不行，困惑好很久！ $('li.item-1').closest('ul', listItemII).css('background-color', 'red'); //结果必须是 item-1的父级ul元素，itemII的子元素， $('li.item-1').closest('#one', listItemII).css('background-color', 'green'); //item-1的id=one的元素，且必须是itemII的子元素，未找到

5.context参数的分析

代码如下

复制代码

closest: function( selectors, context ) { var ret = [], i, l, cur = this[0]; // String var pos = POS.test( selectors ) || typeof selectors !== "string" ? jQuery( selectors, context || this.context ) : 0; for ( i = 0, l = this.length; i < l; i++ ) { cur = this[i]; while ( cur ) { if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { //找到匹配元素，则将其添加返回值集合中！跳到下一元素的查找 ret.push( cur ); break; } else { cur = cur.parentNode; //向上遍历DOM树，匹配选择器 //在上述过程中如果父结点不存在，到达根结点不存在或者找到context结点（已到达指定位置）！ if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { break; } } } } ret = ret.length > 1 ? jQuery.unique( ret ) : ret; return this.pushStack( ret, "closest", selectors ); }

区分parents()与closest()

1、前者从父级开始匹配元素；而后者是从自身开始。

2、前者向上查找所有的父级元素，直至根元素，然后把这些查找的结果放到一个临时

的集合中，再通过额定的条件来进行筛选；后者是从自身元素开始向上查找，直到找到有效的匹配元素就停止。

3、前者返回元素值可以有0个、1个，或者是多个；后者只有0个或1个；