获得“匹配” jQuery 1.8中自定义筛选器选择器中的对象 [英] Getting the "match" object in a Custom Filter Selector in jQuery 1.8

查看:148
本文介绍了获得“匹配” jQuery 1.8中自定义筛选器选择器中的对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

供参考,这是一篇关于 创建一篇文章的文章使用jQuery自定义过滤器选择器

For reference, here's an article on Creating a Custom Filter Selector with jQuery.

对于那些不熟悉 jQuery自定义过滤器选择器的人,这里有一个关于它们的快速入门:

For those not familiar with jQuery's Custom Filter Selectors, here's a quick primer on what they are:

如果你需要一个可重用的 过滤器 ,你可以通过添加你的扩展来扩展jQuery的选择器表达式自己的函数 jQuery.expr [':'] 对象。

If you need a reusable filter, you can extend jQuery’s selector expressions by adding your own functions to the jQuery.expr[':'] object.

该函数将在每个元素上运行在当前集合中应返回true或false(非常类似于 filter ) )。三位信息传递给这个函数:

The function will be run on each element in the current collection and should return true or false (much like filter). Three bits of information are passed to this function:


  1. 有问题的元素

  1. The element in question

整个集合中此元素的索引

The index of this element among the entire collection

A 匹配数组从正则表达式匹配返回,该匹配包含更复杂表达式的重要信息。

A match array returned from a regular expression match that contains important information for the more complex expressions.

一旦扩展 jQuery.expr [':'] ,您可以将它用作jQuery选择器中的过滤器,就像使用任何内置的过滤器一样(:第一个:最后:eq()等。)

Once you've extended jQuery.expr[':'], you can use it as a filter in your jQuery selector, much like you would use any of the built-in ones (:first, :last, :eq() etc.)

这是一个例子,我们将过滤分配了多个类的元素:

Here's an example where we'll filter for elements that have more than one class assigned to them:

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

$('div:hasMultipleClasses');

以下是小提琴: http://jsfiddle.net/acTeJ/

在上面的例子中,我们没有使用过匹配传入我们函数的数组。让我们尝试一个更复杂的例子。在这里,我们将创建一个过滤器来匹配具有比指定数字更高 tabindex 的元素:

In the example above, we have not used the match array being passed in to our function. Let's try a more complex example. Here we'll create a filter to match elements that have a higher tabindex than the number specified:

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

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

以下是小提琴: http://jsfiddle.net/YCsCm/

这可行的原因是因为匹配 array是从用于解析选择器的正则表达式返回的实际数组。因此,在我们的示例中, 匹配将是以下数组

The reason this works is because the match array is the actual array returned from the regex that was used to parse the selector. So in our example, match would be the following array:

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

如您所见,我们可以使用 match [3]

As you can see, we can get to the value inside the parentheses by using match[3].

In jQuery 1.8, 匹配数组不再被传入过滤函数。由于我们无法访问传入的信息,因此 tabindexAbove 过滤器不起作用再一次(这个小提琴和上面的小提琴之间的唯一区别在于它使用了更高版本的jQuery)。

In jQuery 1.8, the match array is no longer being passed in to the filter function. Since we have no access to the info being passed in, the tabindexAbove filter does not work anymore (the only difference between this fiddle and the one above, is that this uses a later version of jQuery).

所以,这里有几点我我想澄清一下:

So, here are several points I'd like clarified:


  1. 这是预期的行为吗?是否记录在任何地方?

  1. Is this expected behavior? Is it documented anywhere?

这是否与 Sizzle 已更新(尽管它明确指出Sizzle的旧API未更改这个重写。也许这就是他们所说的删除现在不必要的 Sizzle.filter )?

现在我们无法访问匹配数组,是否还有其他方法可以获取传递给过滤器的信息(在我们的例子中, 4 )?

Now that we have no access to the match array, is there any other way to get to the info being passed in to the filter (in our case, 4)?

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

I never found any documentation in the jQuery Docs about the custom filter selectors, so I don't know where to start looking for information about this.

推荐答案

jQuery添加了一个用于在Sizzle中创建自定义伪的实用程序。它有点冗长,但它比使用匹配更具可读性[3]。它还具有更高性能的优点,因为每次测试元素时都可以避免重复繁琐的计算。已经接受的答案是一个很好的答案,但是让我添加一个说明,你可以使用$ .expr.createPseudo而不是自己设置sizzleFilter属性,这将节省一点空间。

jQuery has added a utility for creating custom pseudos in Sizzle. It's a little more verbose, but it's much more readable than using match[3]. It also has the advantage of being more performant as you can avoid repeating tedious calculations every time an element is tested. The answer that has already been accepted is a good answer, but let me add a note to say that you can use $.expr.createPseudo instead of setting the sizzleFilter property yourself, which will save a little space.

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/

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

这些都记录在Sizzle的github上:
https://github.com/jquery/sizzle/wiki/Sizzle-Documentation

This is all documented on Sizzle's github: https://github.com/jquery/sizzle/wiki/Sizzle-Documentation

这篇关于获得“匹配” jQuery 1.8中自定义筛选器选择器中的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆