使用 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>
在我的具体情况下，我将在点击链接之前搜索 first .findme 元素。
【问题讨论】：
标签： javascript jquery
假设您是在 onclick 处理程序中执行此操作，因此您可以访问被单击的元素。我要做的是做一个 prevAll 看看它是否处于同一水平。如果没有，那么我会做一个 parent().prevAll() 来获取父元素的先前兄弟姐妹，然后向后遍历这些兄弟姐妹，检查它们的内容以获得所需的元素。继续向上 DOM 树，直到找到所需的内容或找到 DOM 的根。这是一个通用算法。
如果您知道它在表格内，那么您可以简单地获取包含单击元素的行，然后从该行向后遍历表格的行，直到找到包含所需元素的行。
我认为没有办法在一个（链式）语句中做到这一点。
【讨论】：
编辑：此解决方案适用于您的原始问题、您在第一条评论中提到的问题以及您在之后的评论中详述的问题。
$('.myLinks').click(function() {
var findMe = '';
$(this).parents().each(function() {
var a = $(this).find('.findme').is('.findme');
var b = $(this).find('.myLinks').is('.myLinks');
if (a && b) { // look for first parent that
// contains .findme and .myLinks
$(this).find('*').each(function() {
var name = $(this).attr('class');
if ( name == 'findme') {
findMe = $(this); // set element to last matching
// .findme
}
if ( name == 'myLinks') {
return false; // exit from the mess once we find
// .myLinks
}
});
return false;
}
});
alert(findMe.text() ); // alerts "find this one"
});
这适用于您在 OP 中的示例以及 cmets 中解释的修改示例：
<table>
<tr>
<td class="findme">don't find this one</td>
</tr>
<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>
以及你添加的这个测试用例：
<table>
<tr>
<td class="findme">don't find this one</td>
</tr>
<tr>
<td class="findme">don't find this one</td>
</tr>
<tr>
<td class="findme">find this one</td>
</tr>
</table>
<a href="#" class="myLinks">find the previous .findme</a>
【讨论】：
好的，这就是我想出的 - 希望它在许多不同的情况下都会有用。这是我称之为prevALL 和nextALL 的jQuery 的两个扩展。标准的prevAll() 匹配之前的兄弟，prevALL() 匹配 DOM 树上所有之前的元素，nextAll() 和 nextALL() 类似。
我将尝试在下面的 cmets 中解释它：
// 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');
});
edit - 从头开始重写的函数。我只是想到了一种更快更简单的方法来做到这一点。查看编辑历史以了解我的第一次迭代。
再次编辑 - 找到了更简单的方法！
【讨论】：
this.context而不是$( 'body' )，这样它也适用于其他文档中的元素。
我通常给元素编号 (1,2,3..) (rel="number")，所以我使用这段代码为所有先前的元素赋予类：
var num = $(this).attr("rel");
for (var i = 1; i<=num; i++)
{
$('.class[rel="'+i+'"]').addClass("newclass");
}
【讨论】：
有同样的问题，这是我想出的。我的函数使用compareDocumentPosition。不知道它在性能方面与其他解决方案相比如何。
$.fn.findNext = function ( selector ) {
var found, self = this.get(0);
$( selector )
.each( function () {
if ( self.compareDocumentPosition( this ) === 4 ){
found = this;
return false;
}
})
return $(found);
}
当然可以很容易地改变这一点，以获取调用元素之后的所有元素。
$.fn.nextALL= function ( selector ) {
var found = [], self = this.get(0);
$( selector )
.each( function () {
if ( self.compareDocumentPosition( this ) === 4 )
found.push(this);
})
return $(found);
}
$.fn.findNext = function( s ){
var m = this[0], f=function(n){return m.compareDocumentPosition(n)===4;};
return this.pushStack( $(s).get().filter(f) );
}
【讨论】：