jQuery查找与表达式匹配的所有先前元素 [英] jQuery to find all previous elements that match an expression

问题描述

使用jQuery，如何匹配DOM树中当前元素之前的元素？使用 prevAll（）仅匹配之前的兄弟姐妹。

例如：

 < table> 
< tr> 
< td class =findme>找到这个< / td> 
< / tr> 
< tr> 
< td>< a href =＃class =myLinks>找到上一个.findme< / a>< / td> 
< / tr> 
< tr> 
< td class =findme>找不到这个< / td> 
< / tr> 
< / table> 
  

在我的具体情况下，我将首先搜索 <链接点击前的code> .findme 元素。

解决方案

好的，这是什么我想出了 - 希望它在许多不同的情况下都会有用。它是jQuery的2个扩展，我称之为 prevALL 和 nextALL 。虽然标准的 prevAll（）与之前的兄弟姐妹匹配，但 prevALL（）匹配所有以前的元素一直到DOM树，类似于 nextAll（）和 nextALL（）。

<我将尝试在下面的评论中解释它：

  //这是我从$偷走的小帮手扩展程序b $ b // http://www.texotela.co.uk/code/jquery/reverse/ 
 //它只是颠倒了jQuery集的顺序。 
 $ .fn.reverse = function（）{
返回this.pushStack（this.get（）。reverse（），arguments）; 
}; 
 
 //创建两个新函数：prevALL和nextALL。他们非常相似，因此这种风格。 
 $ .each（['prev'，'next']，function（unusedIndex，name）{
 $ .fn [name +'ALL'] = function（matchExpr）{
 / /获取正文中的所有元素，包括正文。
 var $ all = $（'body'）。find（'*'）。andSelf（）; 
 
 // slice $ all对象根据我们看的方式
 $ all =（name =='prev'）
？$ all.slice（0，$ all.index（this））。reverse（ ）
：$ all.slice（$ all.index（this）+ 1）
; 
 //过滤匹配如果指定
 if（matchExpr）$ all = $ all .filter（matchExpr）; 
返回$ all; 
}; 
}）; 
  

用法：

  $（'。myLinks'）。click（function（）{
 $（this）
 .prevALL（'。findme：first'）
 .html（你发现我！）
; 
 
 //将之前的节点设置为蓝色
 $（this）.prevALL（）。css（'backgroundColor'，'blue'）; 
 
 //将节点设置为红色
 $（this）.nextALL（）。css（'backgroundColor'，'red'）; 
}）; 
  

---

编辑 - 功能从头开始重写。我只是想到了一种更快捷，更简单的方法。看看编辑历史记录，看看我的第一次迭代。

再次编辑 - 找到了一种更简单的方法！

Using jQuery, how do you match elements that are prior to the current element in the DOM tree? Using prevAll() only matches previous siblings.

eg:

<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>

In my specific case, I'll be searching for the first .findme element prior to the link clicked.

解决方案

Ok, here's what I've come up with - hopefully it'll be useful in many different situations. It's 2 extensions to jQuery that I call prevALL and nextALL. While the standard prevAll() matches previous siblings, prevALL() matches ALL previous elements all the way up the DOM tree, similarly for nextAll() and nextALL().

I'll try to explain it in the comments below:

// 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;
    };
});

usage:

$('.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 - function rewritten from scratch. I just thought of a much quicker and simpler way to do it. Take a look at the edit history to see my first iteration.

edit again - found an easier way to do it!

这篇关于jQuery查找与表达式匹配的所有先前元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！