返回值:jQuery closest(expr|object|element)
概述
jQuery 1.3新增。從元素本身開始,逐級向上級元素匹配,並返回最先匹配的元素。。
closest會首先檢查目前元素是否匹配,如果匹配則直接返回元素本身。如果不匹配則向上查詢父元素,一層一層往上,直到找到匹配選擇器的元素。如果什麼都沒找到則返回一個空的jQuery對象。
closest和parents的主要區別是:1,前者從目前元素開始匹配尋找,後者從父元素開始匹配尋找;2,前者逐級向上查詢,直到發現匹配的元素后就停止了,後者一直向上查詢直到根元素,然後把這些元素放進一個臨時集合中,再用給定的選擇器表達式去過濾;3,前者返回0或1個元素,後者可能包含0個,1個,或者多個元素。
closest對於處理事件委託非常有用。
.closest( selectors [, context ] )方法從 jQuery 1.7 開始,不再建議使用該方法,但是 jQuery 1.7 之前仍然可以使用。 該方法將主要用於 jQuery 內部或外掛作者使用。
參數
expr String,Array V1.3
用以過濾元素的表達式。jQuery 1.4開始,也可以傳遞一個字串陣列,用於查詢多個元素。
expr,[context] String V1.4
expr:用以過濾子元素的表達式
context:DOM元素在其中一個匹配的元素可以被發現。如果沒有上下文在當時的情況下通過了jQuery設定將被使用。
jQuery object object V1.6
一個用於匹配元素的jQuery對像
element DOMElement V1.6
一個用於匹配元素的DOM元素。
示例
描述:
展示如何使用clostest查詢多個元素
HTML 程式碼:
<ul><li></li><li></li></ul>
jQuery 程式碼:
$("li:first").closest(["ul", "body"]);
結果:
[ul, body]
描述:
展示如何使用clostest來完成事件委託。
HTML 程式碼:
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
jQuery 程式碼:
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});