Element.previous - Prototype JavaScript 框架

Xunxin Prototype API

previous

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

返回匹配 cssRule 指定规则的 element 的前一个兄弟节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule 参数,则默认匹配所有前导兄弟节点。 如果没有符合条件的节点,返回 undefined

Element.previous 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.upElement.downElement.next,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的前导兄弟节点进行精确选择。 (注意:如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,headbody 是兄弟节点,因为它们的父节点都是 html。)

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

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

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

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

参数

如果不传递任何参数,将返回 element 的上一个前导兄弟节点(这类似于调用 previousSibling,只不过 Element.previous 返回一个已 扩展 的元素。

如果 index 参数被传递,将返回 element 的具有相应索引的前导兄弟节点。(这等同于从方法 Element.previousSiblings 返回的元素数组中选择相应的成员。) 注意,element 正上方的前导兄弟节点的索引为 0。

如果定义了 cssRule 参数,Element.previous 将返回匹配的第一个前导兄弟节点。

如果 cssRuleindex 都被定义,Element.previous 将会获取所有匹配指定 CSS 规则的前导兄弟节点集合,然后返回指定索引处的节点。

在上述的所有情形中,如果没有找到相应的前导兄弟节点,将返回 undefined

样例

<ul id="fruits">
	<li id="apples">
		<h3>Apples</h3>
		<ul id="list-of-apples">
			<li id="golden-delicious" class="yummy">Golden Delicious</li>
			<li id="mutsu" class="yummy">Mutsu</li>
			<li id="mcintosh">McIntosh</li>
			<li id="ida-red">Ida Red</li>
		</ul>
		<p id="saying">An apple a day keeps the doctor away.</p>
	</li>
</ul> 
$('saying').previous(); 
// 等同于:
$('saying').previous(0);
// -> ul#list-of-apples
$('saying').previous(1); 
// -> h3 
$('saying').previous('h3');
// -> h3 
$('ida-red').previous('.yummy'); 
// -> li#mutsu 
$('ida-red').previous('.yummy', 1); 
// -> li#golden-delicious 
$('ida-red').previous(5); 
// -> undefined