例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个；