获取“匹配”的对象在自定义过滤器选择在jQuery的1.8(Getting the “match”

2019-06-17 12:38发布

作为参考,这里是上一篇文章创建使用jQuery自定义过滤器选择


介绍:

对于那些不熟悉jQuery的自定义过滤器选择器 ,这里的一对,他们是什么快速入门:

如果你需要一个可重复使用的filter ,您可以通过添加自己的功能扩展了jQuery的选择表达jQuery.expr[':']对象。

该函数将每个元素当前集合中运行,并且应该返回true或false(就像filter )。 信息三位是传递给这个函数:

  1. 有问题的元素

  2. 此元素的整个集合中的索引

  3. match阵列从包含用于更复杂的表达式重要信息的正则表达式匹配返回。

一旦你扩展jQuery.expr[':']你可以用它在你的jQuery选择过滤器,就像你使用任何内置者的( :first:last:eq()等。)


这里我们将会过滤出有多个类分配给它们的元素的例子:

jQuery.expr[':'].hasMultipleClasses = function(elem, index, match) {
    return elem.className.split(' ').length > 1;
};

$('div:hasMultipleClasses');

这里的小提琴: http://jsfiddle.net/acTeJ/


在上面的例子中,我们还没有使用的match阵列传递到我们的功能。 让我们尝试一个更复杂的例子。 在这里,我们将创建一个过滤器,以匹配具有更高元素tabindex比指定数:

jQuery.expr[':'].tabindexAbove = function(elem, index, match) {
    return +elem.getAttribute('tabindex') > match[3];
};

$('input:tabindexAbove(4)');

这里的小提琴: http://jsfiddle.net/YCsCm/

这部作品的原因是因为match阵列是从被用来分析选择正则表达式返回的实际阵列。 所以在我们的例子中, match将是以下数组 :

[":tabIndexAbove(4)", "tabIndexAbove", "", "4"]

正如你所看到的,我们可以用得到,括号内的值match[3]


问题:

jQuery中1.8, 该match阵列不再被传递到过滤器功能 。 因为我们要传递的信息没有访问权限, 该tabindexAbove过滤器不工作了 (这小提琴和上面的一个之间的唯一区别是,这里使用的jQuery的更高版本)。

因此,这里有几点我想澄清:

  1. 这是预期的行为? 难道它记录任何地方?

  2. 这是否有什么关系的事实, Sizzle已经更新 (即使它明确规定,“旧的API灒在此重写没有改变。”也许这就是他们的意思是“去除现在不必要的Sizzle.filter “)?

  3. 现在我们已经到了无法访问match阵列,是否有任何其他的方式来获得在传递给过滤器的信息(在本例中, 4 )?

我从来没有发现在jQuery的文档有关自定义过滤器选择任何文件 ,所以我不知道从哪里开始寻找这方面的信息。

Answer 1:

jQuery的增加了一个应用程序,用于灒创建自定义假点。 这是一个有点冗长,但它比使用比赛更具可读性[3]。 它还具有可更好的性能如可避免每一个元件被测试时重复繁琐的计算的优点。 已经被接受的答案是一个很好的答案,但让我添加备注,说,你可以使用$ .expr.createPseudo而不是设置sizzleFilter自己的财产,这将节省一点空间。

jQuery.expr[':'].tabIndexAbove = $.expr.createPseudo(function( tabindex ) {
    return function(elem) {
        return +elem.getAttribute('tabindex') > tabindex;
    }
});

$('input:tabIndexAbove(4)').css('background', 'teal');

的jsfiddle: http://jsfiddle.net/timmywil/YCsCm/7/

这是所有记录在灒的github上: https://github.com/jquery/sizzle/wiki/Sizzle-Documentation



Answer 2:

通过查看jQuery的1.8β2源的“可扩展性”部分新灒 ,你必须设置fn.sizzleFiltertrue为了得到伪参数和上下文。 如果没有,你只得到了论据的所有元素。

下面是做同样的事情为您的示例代码。 使用selector的函数传递参数来获取伪说法。

这里是工作示例上的jsfiddle。

正如博客文章上面提到的,你甚至可以预编译和缓存您的选择。

var sizzle = jQuery.find;

var tabIndexAbove = function( selector, context, isXml ) {
    return function( elem ) {
        return elem.getAttribute("tabindex") > selector;
    };
};

/*
 fn.sizzleFilter is set to true to indicate that tabIndexAbove 
 is a function that will return a function for use by the compiler 
 and should be passed the pseudo argument, the context, and 
 whether or not the current context is xml. If this property is 
 not set, adding pseudos works similar to past versions of Sizzle
*/
tabIndexAbove.sizzleFilter = true;
sizzle.selectors.pseudos.tabIndexAbove = tabIndexAbove;

$('input:tabIndexAbove(4)').css('background', 'teal');

只是注意,如果你正在寻找源头,jQuery的略有变化的结构,即面向公众的接口点。

在jQuery的1.7.2:

jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;

在jQuery的1.8b2:

jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.pseudos;


文章来源: Getting the “match” object in a Custom Filter Selector in jQuery 1.8