当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《jQuery查找与表达式匹配的所有先前元素》经验,为你挑选了1个好方法。

使用jQuery,如何匹配DOM树中当前元素之前的元素?使用prevAll()只匹配以前的兄弟姐妹.

例如:

find this one
find the previous .findme
don't find this one

在我的具体情况下,我将在点击链接之前搜索第一个 .findme元素.



1> nickf..:

好的,这就是我想出来的 - 希望它在许多不同的情况下都会有用.这是2个扩展到jQuery的,我叫prevALLnextALL.虽然标准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');
});

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

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

推荐阅读
小色米虫_524
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有