Element.up - Prototype JavaScript 框架

From Xunxin Prototype API

up

up(element, [cssRule][, index = 0]) -> HTMLElement | undefined

返回 element 的与 cssRule 相匹配的第一个先代节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule,则默认匹配所有先代节点。如果没有符合条件的先代节点,返回 undefined。

Element.up 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.down、 Element.next 和 Element.previous,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的先代节点进行精确选择。

因为它忽略了文本节点(仅返回元素),所以你不必担心空白节点。

还有一个额外的惊喜,所有返回的元素都已经过 扩展,支持链式的调用方式:

$(element).up(1).next('li', 2).hide(); 

遍历 DOM 从不曾像现在这么方便。

参数

如果不传递任何参数,将返回 element 的第一个先代节点(这类似于调用 parentNode,只不过 Element.up 返回一个已 扩展 的元素。

如果 index 参数被传递,将返回 element 的具有相应索引的先代节点。(这等同于从方法 Element.ancestors 返回的元素数组中选择相应的成员。)注意,第一个元素的索引为 0。

如果定义了 cssRule 参数,Element.up 将返回匹配的第一个先代节点。

如果 cssRule 和 index 都被定义,Element.up 将会获取所有匹配指定 CSS 规则的先代节点集合, 然后返回指定索引处的元素。

在上述的所有情形中,如果没有找到相应的先代节点,将返回 undefined。

样例

<html> 
	[…] 
	
	<body> 
		<ul id="fruits"> 
			<li id="apples" class="keeps-the-doctor-away"> 
				<ul> 
					<li id="golden-delicious">Golden Delicious</li>
					<li id="mutsu" class="yummy">Mutsu</li> 
					<li id="mcintosh" class="yummy">McIntosh</li> 
					<li id="ida-red">Ida Red</li>
				</ul> 
			</li> 
		</ul> 
	</body> 
</html> 
$('fruits').up(); 
// 等同于:
$('fruits').up(0); 
// -> body 
$('mutsu').up(2); 
// -> ul#fruits 
$('mutsu').up('li'); 
// -> li#apples 
$('mutsu').up('.keeps-the-doctor-away');
// -> li#apples 
$('mutsu').up('ul', 1); 
// -> ul#fruits 
$('mutsu').up('div'); 
// -> undefined