jQuery 教程
jQuery parents() 方法
jQuery 遍歷方法實(shí)例
返回 <span> 的所有祖先元素：
$(document).ready(function(){
$("span").parents().css({"({"color":"red","border":"2px solid red"});
});
$("span").parents().css({"({"color":"red","border":"2px solid red"});
});
Result:
body (great-great-grandparent)
div (great-grandparent)
- ul (grandparent)
- li (direct parent) span
運(yùn)行代碼 ?
定義和用法
parents() 方法返回被選元素的所有祖先元素。
祖先是父、祖父、曾祖父，依此類推。
DOM 樹：該方法從父元素向上遍歷 DOM 元素的祖先，直至文檔根元素的所有路徑（<html>）。
注意：如果 filter 參數(shù)為空，該方法將從直接父元素直至 <body> 和 <html> 的所有路徑中選取元素集合中的所有祖先。因此傳遞一個(gè)縮小搜索結(jié)果范圍的選擇器表達(dá)式是非常有用的。
該方法與 closest() 都是向上遍歷 DOM 樹，不同點(diǎn)是：
parents()
- 從父元素開始
- 沿 DOM 樹向上遍歷，并返回匹配所傳遞的表達(dá)式的所有祖先
- 返回包含零個(gè)、一個(gè)或多個(gè)元素的 jQuery 對(duì)象
closest()
- 從當(dāng)前元素開始
- 沿 DOM 樹向上遍歷，并返回匹配所傳遞的表達(dá)式的第一個(gè)祖先
- 返回包含零個(gè)或一個(gè)元素的 jQuery 對(duì)象
其他相關(guān)方法：
- parent() - 返回被選元素的直接父元素
- parentsUntil() - 返回兩個(gè)給定參數(shù)之間的所有祖先元素
語法
$(selector).parents(filter)
| 參數(shù) | 描述 |
|---|---|
| filter | 可選。規(guī)定縮小搜索祖先元素范圍的選擇器表達(dá)式。 注意：如需返回多個(gè)祖先，請(qǐng)使用逗號(hào)分隔每個(gè)表達(dá)式。 |
更多實(shí)例
縮小搜索范圍
如何使用 filter 參數(shù)來返回 <span> 的所有祖先中的 <ul> 元素。
返回多個(gè)祖先
如何使用 filter 參數(shù)來返回 <span> 的所有祖先中的 <li> 和 <div> 元素。
通過標(biāo)簽名演示元素的祖先
演示 <span> 元素的祖先。
其他擴(kuò)展