Latest web development tutorials

jQuery parents() 方法

jQuery 遍歷方法 jQuery遍歷方法

實例

返回<span> 的所有祖先元素:

$(document).ready(function(){
$("span").parents().css({"({"color":"red","border":"2px solid red"});
});

Result:

body (great-great-grandparent)
div (great-grandparent)
    ul (grandparent)
  • li (direct parent) span

嘗試一下»

定義和用法

parents() 方法返回被選元素的所有祖先元素。

祖先是父、祖父、曾祖父,依此類推。

DOM樹:該方法從父元素向上遍歷DOM元素的祖先,直至文檔根元素的所有路徑(<html>)。

注意:如果filter參數為空,該方法將從直接父元素直至<body>和<html>的所有路徑中選取元素集合中的所有祖先。 因此傳遞一個縮小搜索結果範圍的選擇器表達式是非常有用的。

該方法與closest()都是向上遍歷DOM樹,不同點是:

parents()

  • 從父元素開始
  • 沿DOM 樹向上遍歷,並返回匹配所傳遞的表達式的所有祖先
  • 返回包含零個、一個或多個元素的jQuery 對象

closest()

  • 從當前元素開始
  • 沿DOM 樹向上遍歷,並返回匹配所傳遞的表達式的第一個祖先
  • 返回包含零個或一個元素的jQuery 對象

其他相關方法:

  • parent() -返回被選元素的直接父元素
  • parentsUntil() -返回兩個給定參數之間的所有祖先元素

語法

$(selector).parents( filter )

参数 描述
filter 可选。规定缩小搜索祖先元素范围的选择器表达式。

注意:如需返回多个祖先,请使用逗号分隔每个表达式。

實例

更多實例

縮小搜索範圍
如何使用filter 參數來返回<span> 的所有祖先中的<ul> 元素。

返回多個祖先
如何使用filter 參數來返回<span> 的所有祖先中的<li> 和<div> 元素。

通過標籤名演示元素的祖先
演示<span> 元素的祖先。


jQuery 遍歷方法 jQuery遍歷方法