使用jQuery,如何匹配DOM树中当前元素之前的元素？使用prevAll()只匹配以前的兄弟姐妹.
例如：
<table>
<tr>
<td class="findme">find this one</td>
</tr>
<tr>
<td><a href="#" class="myLinks">find the prevIoUs .findme</a></td>
</tr>
<tr>
<td class="findme">don't find this one</td>
</tr>
</table>
解决方法
好的,这是我想出来的 – 希望它会在许多不同的情况下有用.这是jQuery的2个扩展名,我称之为prev和nextALL.虽然标准prevAll()匹配先前的兄弟姐妹,但是prevALL()与所有先前的元素都一致地匹配了DOM树,类似于nextAll()和nextALL().
我会尝试在下面的评论中解释一下：
// this is a small helper extension i stole from
// http://www.texotela.co.uk/code/jquery/reverse/
// it merely reverses the order of a jQuery set.
$.fn.reverse = function() {
return this.pushStack(this.get().reverse(),arguments);
};
// create two new functions: prevALL and nextALL. they're very similar,hence this style.
$.each( ['prev','next'],function(unusedIndex,name) {
$.fn[ name + 'ALL' ] = function(matchExpr) {
// get all the elements in the body,including the body.
var $all = $('body').find('*').andSelf();
// slice the $all object according to which way we're looking
$all = (name == 'prev')
? $all.slice(0,$all.index(this)).reverse()
: $all.slice($all.index(this) + 1)
;
// filter the matches if specified
if (matchExpr) $all = $all.filter(matchExpr);
return $all;
};
});
用法：
$('.myLinks').click(function() {
$(this)
.prevALL('.findme:first')
.html("You found me!")
;
// set prevIoUs nodes to blue
$(this).prevALL().css('backgroundColor','blue');
// set following nodes to red
$(this).nextALL().css('backgroundColor','red');
});
编辑 – 从头改写.我只是想到一个更快捷和更简单的方式来做到这一点.看看编辑历史,看看我的第一次迭代.
再次编辑 – 找到一个更简单的方法来做到这一点！
