2013 年 3 月 1 日

jQuery.prev()的正确使用

Author : lovecicy

jQuery的API向来都很好用，而且API的方法也很容易记住，富有自解释性；学会使用一个方法时，有些还能根据自己的理解联想到相似的API方法。但是，今天使用prev()时，发现自己对这个API的理解有误。

之前的理解是:

当prev()没有参数时，选择每个调用者在DOM树中的前一个兄弟节点，并返回其的jQuery对象；

当prev()有参数时，选择每个调用者在DOM树中的之前的兄弟节点里面满足选择条件的节点中最接近调用者的那个节点；

但是今天使用时却发现不是这样的，查了下jQuery的文档，才发现原来和自己的理解有出入，以下是jQuery文档中的解释：

Given a jQuery object that represents a set of DOM elements, the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.

If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.

当给定一个代表DOM节点的jQuery对象时，prev()方法在DOM树中搜索每个节点的前一个节点，并且将匹配的节点构建成一个jQuery对象返回。

prev()方法接受一个可选的选择器表达式，此表达式的类型与$()方法可以接受的选择器表达式相同。如果提供了此参数，那么调用者的前一个兄弟节点将会被选中，并用表达式来过滤此兄弟节点是否匹配给定的条件。

如果在DOM树中调用者的前面没有兄弟节点或者前面的那个兄弟节点与给定的选择器参数不匹配，将会返回一个空的jQuery对象。

 

所以如果给定下面的代码片段：

<ul>

<li>one</li>

<li>two</li>

<li>three</li>

<li id=”four”>four</li>

</ul>

使用下面的语句将返回一个空对象：

$(‘#four’).prev(‘:contains(“two”)’);

因为prev()方法返回的是内容为“three”的<li/>节点，与参数中的选择器不匹配，所以返回空对象；而不是选择<li id=”four”/>前面的兄弟节点中内容为two的<li/>节点。

那么如果要选择内容为two的节点只能用$(‘#four’).prev().prev()吗？其实不是，你可以使用prevAll()方法,结合『:eq(index)』获取。

prevAll()方法返回调用者前面的所有兄弟节点数组，并且按照离调用者的距离排序，所以如果要取得内容为two的节点，只需要下面这句代码：

$(‘#four’).prevAll(‘:eq(1)’);

同理可知next()和nextAll()的用法了。

虽然jQuery的方法很好用，但是用之前还是要先熟悉文档，以免被自己的理解害了，也浪费很多找错误的时间。