快捷導(dǎo)航

JQuery.closest(),parent(),parents()尋找父結(jié)點(diǎn)

更新時(shí)間：2012年02月17日 22:16:04 作者：

在50個(gè)必備的實(shí)用jQuery代碼段看到關(guān)于closest()方法的介紹，考慮到開(kāi)發(fā)過(guò)程中經(jīng)常有找爹的需求，以前用的都是parent()/parents()方法（還經(jīng)常找不到?。跃痛搜芯繉?duì)比一下！

HTML代碼，測(cè)試地址：jQuery 遍歷 - closest() 方法

QQ截圖20120217171206

------我粘代碼上來(lái)，在頁(yè)面上會(huì)自動(dòng)隱藏（會(huì)顯示一下）！誰(shuí)能教我這是腫么回事！
1.通過(guò)item-1查找 level-3(查找直接上級(jí))

復(fù)制代碼代碼如下:

 
$('li.item-1').closest('ul') 
$('li.item-1').parent() 
$('li.item-1').parents().eq(0) 

2.通過(guò)item-1查找 level-2(通過(guò)選擇器查找父元素)

復(fù)制代碼代碼如下:

 
$('li.item-1').closest('.level-2') 
//$('li.item-1').parent('.level-2') //找不到，parent()方法只遍歷到上一層！ 
$('li.item-1').parent().parent() //這個(gè)太二了有木有！ 
$('li.item-1').parents('.level-2') 

parent(selector)中selector的用法

復(fù)制代碼代碼如下:

 
$('li').parent() //返回level-3,level-2和level-1的集合，它們都是li的父元素 
$('li').parent('.level-3') //在上述集合中篩選出 level-3 

3.closest方法從當(dāng)前元素開(kāi)始遍歷，而parent()從父元素開(kāi)始！
$('li.item-1').closest('li') //返回 item-1，使用時(shí)要注意，如果是一個(gè)div嵌套在中一個(gè)div中，要考慮選擇器的正確使用！
4.closet(selector,context)中context參數(shù)的用法從當(dāng)前元素開(kāi)始遍歷到context元素結(jié)束，若不存在context參數(shù)遍歷到根結(jié)點(diǎn)
由此可見(jiàn)使用context參數(shù)可以提高查詢(xún)效率！

復(fù)制代碼代碼如下:

 
var listItemII = document.getElementById('ii'); //Item-II 
//var listItemII=$(‘#ii'),這個(gè)不行，困惑好很久！ 
$('li.item-1').closest('ul', listItemII).css('background-color', 'red'); 
//結(jié)果必須是 item-1的父級(jí)ul元素，itemII的子元素， 
$('li.item-1').closest('#one', listItemII).css('background-color', 'green'); 
//item-1的id=one的元素，且必須是itemII的子元素，未找到 

5.context參數(shù)的分析

復(fù)制代碼代碼如下:

 
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樹(shù)，匹配選擇器 
//在上述過(guò)程中如果父結(jié)點(diǎn)不存在，到達(dá)根結(jié)點(diǎn)不存在或者找到context結(jié)點(diǎn)（已到達(dá)指定位置）！ 
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { 
break; 
} 
} 
} 
} 
ret = ret.length > 1 ? jQuery.unique( ret ) : ret; 
return this.pushStack( ret, "closest", selectors ); 
} 

對(duì)JQuery源碼不是很了解，其中的一些細(xì)節(jié)就不解釋了！
通過(guò)closest()的定義可以得知，與context進(jìn)行對(duì)比的變量cur=this[i]是一個(gè)DOM對(duì)象，而$('#ii')方法得到的是一個(gè)JQuery對(duì)象，因此傳給closest（selector,context）方法的context參數(shù)必須通過(guò)DOM方法獲得!
jQuery對(duì)象和DOM對(duì)象的轉(zhuǎn)換？
1.獲取對(duì)象(變量名前加$目的為約定區(qū)別JQuery和DOM變量)：
獲取jQuery對(duì)象：var $variable=jQuery對(duì)象；
獲取DOM對(duì)象：var variable=DOM對(duì)象；
2.jQuery對(duì)象轉(zhuǎn)DOM對(duì)象：
利用數(shù)組轉(zhuǎn)換 var cr=$("#cr")[0];
利用get(index)方法轉(zhuǎn)換 var cr=$("#cr").get(0);
3.DOM對(duì)象轉(zhuǎn)jQuery對(duì)象：

復(fù)制代碼代碼如下:

 
var cr=document.getElementsById("cr"); //獲取DOM對(duì)象 
var $cr=$(cr);//轉(zhuǎn)換為jQuery對(duì)象 

SO….
$('li.item-1').closest('#one', $(‘#ii').get(0))//如此使用
或者將源碼中 "cur===context”的判斷改為 "$(cur)===$(current)",這樣就可以兼容兩種用法！
當(dāng)然，修改源碼并不是一個(gè)好建議，但是為什么JQuery本身沒(méi)有使用這種方式呢……求指教 ?。?！

您可能感興趣的文章: