626
jquery中closest()與parents()的方法區別分析總結
在jquery中parents()查找父級元素刪除的時候，發現它不包含根元素，於是用了closest()，效果不錯，下麵我給大家具體的介紹
closest
closest() 方法獲得匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上
語法：
.closest(selector, context)
參數selector為字符串值，用以過濾匹配元素的擇器表達式
參數context可選,作為待查找的 DOM 元素集或者文檔
context參數
closet(selector,context)中context參數的用法:從當前元素開始遍曆到context元素結束，若不存在context參數遍曆到根結點;由此可見使用context參數可以提高查詢效率
var listItemII = document.getElementById('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的子元素，未找到
.parents() 和 .closest() 方法類似，它們都用於沿 DOM 樹向上遍曆,匹配元素的選擇器字符串。兩者之間的差異盡管微妙，卻很重要：
| .closest() | .parents() |
|---|---|
| 從當前元素開始 | 從父元素開始 |
| 沿DOM樹向上遍曆直到找到已應用選擇器的一個匹配為止 | 沿DOM樹向上遍曆直到文檔的根元素為止,將每個祖先元素添加到一個臨時的集合;如果應用了選擇器，則會基於該選擇器對這個集合進行篩選 |
| 返回包含零個或一個元素的 jQuery 對象 | 返回包含零個、一個或多個元素的 jQuery 對象 |
先看下麵的示例：演示如何通過 closest() 完成事件委托。當被最接近的列表元素或其子後代元素被點擊時，會切換黃色背景
<style>
li.hilight { background: yellow; }
</style>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
1、當鼠標點擊“You can also”時顏色出現變化。這是因為closest是從當前元素開始向上遍曆的。而不同於parents()方法，是從當前元素的父元素開始向上遍曆
2、當點擊Click me!時，顏色也會變化。這同樣經過上麵步驟，從當前元素向上匹配，隻不過不符合條件，再往上時遇見了
最後更新：2017-06-23 23:02:41