jQuery parents() 方法
示例
返回 <span> 的所有祖先元素
$(document).ready(function(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
結果
body (曾祖父)div (祖父)ul (祖父母)- li (直接父元素) span
自己動手試一試 »
定義和用法
parents() 方法返回所選元素的所有祖先元素。
祖先是父級、祖父級、曾祖父級等。
DOM 樹:此方法沿著 DOM 元素的祖先向上遍歷,一直到文件的根元素 (<html>)。
注意:如果 filter 引數為空,此函式將選擇一組元素的所有祖先,從直接父元素一直到 <body> 和 <html>。因此,通常傳遞一個選擇器表示式來縮小搜尋結果很有用。
此方法與 closest() 類似,它們都向上遍歷 DOM 樹。區別如下:
parents()
- 從父元素開始
- 向上遍歷 DOM 樹並返回所有匹配給定表示式的祖先
- 返回的 jQuery 物件包含零個或多個元素
closest()
- 從當前元素開始
- 向上遍歷 DOM 樹並返回第一個匹配給定表示式的祖先
- 返回的 jQuery 物件包含零個或一個元素
其他相關方法
- parent() - 返回所選元素的直接父元素
- parentsUntil() - 返回兩個給定引數之間的所有祖先元素
語法
$(selector).parents(filter)
引數 | 描述 |
---|---|
篩選器 | 可選。指定一個選擇器表示式來縮小祖先的搜尋範圍 注意:要返回多個祖先,請用逗號分隔每個表示式。 |
親手嘗試 - 示例
縮小搜尋範圍
如何使用 filter 引數返回 <span> 的所有 <ul> 元素祖先。
返回多個祖先
如何使用 filter 引數返回 <span> 的所有 <li> 和 <div> 元素祖先。
按標籤名顯示元素的祖先
一個演示,展示了 <span> 元素的祖先究竟是誰。