jQuery closest() 方法
示例
返回 <span> 的第一個祖先元素,該祖先元素是 <ul> 元素
$(document).ready(function(){
$("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});
結果
body (曾祖父)div (祖父)ul (第二個祖先 - 第二個祖父)ul (第一個祖先 - 第一個祖父)- li (直接父級) span
自己動手試一試 »
定義和用法
closest() 方法返回選中元素的第一個祖先元素。
祖先是父級、祖父級、曾祖父級等。
DOM 樹: 該方法會從當前元素開始,向上遍歷整個 DOM 樹,直到文件的根元素(<html>),以查詢 DOM 元素中的第一個祖先。
此方法與 parents() 類似,它們都遍歷 DOM 樹向上。區別如下:
closest()
- 從當前元素開始
- 遍歷 DOM 樹並返回第一個(單個)匹配傳遞表示式的祖先
- 返回的 jQuery 物件包含零個或一個元素
parents()
- 從父元素開始
- 遍歷 DOM 樹並返回所有匹配傳遞表示式的祖先
- 返回的 jQuery 物件包含零個或多個元素
其他相關方法
- parent() - 返回選中元素的直接父元素
- parentsUntil() - 返回兩個給定引數之間的所有祖先元素
語法
返回選中元素的第一個祖先
$(選擇器).closest(過濾器)
返回第一個祖先,使用 DOM 上下文在 DOM 樹中向上查詢
$(選擇器).closest(過濾器,上下文)
引數 | 描述 |
---|---|
篩選器 | 必需。指定一個選擇器表示式、元素或 jQuery 物件來縮小祖先搜尋範圍 |
context | 可選。一個 DOM 元素,其中可能找到匹配的元素 |
親手嘗試 - 示例
返回 <span> 的第一個祖先元素,該祖先元素是 <span> 元素
由於此方法從當前元素開始,因此搜尋 <span> 的第一個 <span> 將返回 <span>。
傳遞一個 DOM 元素作為上下文,用於搜尋第一個祖先元素
同時使用這兩個引數來傳遞一個 DOM 元素作為上下文,用於搜尋第一個 <ul> 元素。