javascript - jQuery查找匹配表达式的所有先前元素

Question

使用 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 元素。

Answer 1

好的，这就是我的想法 - 希望它在许多不同的情况下都有用。它是 jQuery 的 2 个扩展，我称之为 prevALL 和 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');
});

---

编辑 - 从头开始​​重写的函数。我只是想到了一种更快更简单的方法。查看编辑历史记录以查看我的第一次迭代。

再次编辑 - 找到了更简单的方法!