jQuery数据选择器

我需要根据存储在元素.data()对象中的值来选择元素。至少，我想使用选择器来选择顶级数据属性，也许像这样：

$('a').data("category","music");
$('a:data(category=music)');

或者选择器将采用常规属性选择器格式：

$('a[category=music]');

或采用属性格式，但带有说明符以指示其位于.data()：

$('a[:category=music]');

我发现James Padolsey的实现看起来很简单，但是很好。该页面上显示的镜像方法上方的选择器格式。还有这个Sizzle补丁。

出于某种原因，我记得有一阵子，jQuery 1.4将支持对jquery .data()对象中的值的选择器。但是，现在我正在寻找它，所以找不到了。也许这只是我看到的功能要求。有对此的支持，我只是没有看到？

理想情况下，我想使用点表示法在data（）中支持子属性。像这样：

$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');

我还想支持多个数据选择器，在其中只能找到具有所有指定数据选择器的元素。常规jquery多重选择器执行OR操作。例如，$('a.big, a.small')选择a具有class big或的标签small。我正在寻找AND，也许是这样的：

$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');

最后，如果可以在数据选择器上使用比较运算符和正则表达式功能，那就太好了。这样$(a[:artist.id>5000])有可能。我意识到我可能可以使用来完成很多工作filter()，但是拥有一个简单的选择器格式会很好。

有哪些解决方案可以做到这一点？Jame's Padolsey目前是最好的解决方案吗？我主要关心的是性能，还涉及子特性点表示法和多个数据选择器等额外功能。是否有其他支持这些功能或在某种程度上更好的实现？

我创建了一个新的data选择器，使您可以执行嵌套查询和AND条件。用法：

$('a:data(category==music,artist.name==Madonna)');

模式是：

:data( {namespace} [{operator} {check}]  )

“操作员”和“检查”是可选的。所以，如果你只有:data(a.b.c)它会简单地检查了感实性的a.b.c。

您可以在下面的代码中看到可用的运算符。其中包括~=允许进行正则表达式测试的功能：

$('a:data(category~=^mus..$,artist.name~=^M.+a$)');

我已经对其进行了一些测试，并且看起来效果很好。我可能很快会将其添加为Github存储库（带有完整的测试套件），因此请注意！

代码：

(function(){

    var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;

    function resolve(element, data) {

        data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);

        var cur = jQuery.data(element)[data.shift()];

        while (cur && data[0]) {
            cur = cur[data.shift()];
        }

        return cur || undefined;

    }

    jQuery.expr[':'].data = function(el, i, match) {

        matcher.lastIndex = 0;

        var expr = match[3],
            m,
            check, val,
            allMatch = null,
            foundMatch = false;

        while (m = matcher.exec(expr)) {

            check = m[4];
            val = resolve(el, m[1] || m[5]);

            switch (m[2]) {
                case '==': foundMatch = val == check; break;
                case '!=': foundMatch = val != check; break;
                case '<=': foundMatch = val <= check; break;
                case '>=': foundMatch = val >= check; break;
                case '~=': foundMatch = RegExp(check).test(val); break;
                case '>': foundMatch = val > check; break;
                case '<': foundMatch = val < check; break;
                default: if (m[5]) foundMatch = !!val;
            }

            allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;

        }

        return allMatch;

    };

}());

此刻我正在选择这样的：

$('a[data-attribute=true]')

这看起来似乎很好，但是如果jQuery能够通过没有'data-'前缀的属性进行选择，那将是很好的选择。

我还没有使用通过jQuery动态添加到元素中的数据来测试这一点，所以这可能是该方法的缺点。

您也可以使用没有任何插件的简单过滤功能。这不是您想要的，但是结果是相同的：

$('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

$('a').filter(function() {
    return $(this).data('user') && $(this).data('user').name.first === "Tom";
});

$('a[data-attribute=true]')如果您通过data（）函数将数据附加到DOM元素，我想警告您，按照Ashley的答复，这是行不通的。

如果在HTML中添加了实际的数据属性，它会按预期工作，但是jQuery将数据存储在内存中，因此您从中获得的结果$('a[data-attribute=true]')将是不正确的。

您需要使用数据插件http://code.google.com/p/jquerypluginsblog/，使用Dmitri的filter解决方案，或者对所有元素进行$ .each并反复检查.data（）

有一个:data()过滤器插件可以做到这一点:)

根据您的问题的一些示例：

$('a:data("category=music")')
$('a:data("user.name.first=Tom")');
$('a:data("category=music"):data("artist.name=Madonna")');
//jQuery supports multiple of any selector to restrict further, 
//just chain with no space in-between for this effect

性能不会比什么是极大的可能，从选择$._cache和抓取相应的元素是目前为止最快的，但多了很多迂回的和你如何去方面不是很“jQuery的安永”东西（您通常从元素一侧进来）。我不敢肯定这是最快的，因为就性能而言，从唯一ID到元素的转换过程本身就很复杂。

您提到的比较选择器最好在中进行.filter()，插件中没有对此的内置支持，尽管您可以添加它而不会带来很多麻烦。

您可以使用设置data-*榆木的属性attr()，然后使用该属性进行选择：

var elm = $('a').attr('data-test',123); //assign 123 using attr()
elm = $("a[data-test=123]"); //select elm using attribute

现在对于榆树，都attr()和data()将产生123：

console.log(elm.attr('data-test')); //123
console.log(elm.data('test')); //123

但是，如果使用将值修改为456attr()，data() 则仍为123：

elm.attr('data-test',456); //modify to 456
elm = $("a[data-test=456]"); //reselect elm using new 456 attribute

console.log(elm.attr('data-test')); //456
console.log(elm.data('test')); //123

因此，据我了解，似乎您可能应该避免不必要地在代码中混用attr()和data()命令。因为attr()似乎data()其初始值可以来自DOM，但它似乎与DOM直接对应，而与“内存”交互。但是关键是两者不一定完全同步。

因此，请小心。

无论如何，如果您不更改data-*DOM或内存中的属性，那么就不会有问题。当您开始修改值时，可能会出现潜在问题。

感谢@Clarence Liu对@Ash的回答以及这篇文章。

$('a[data-category="music"]')

有用。请参见属性等于选择器[name =” value”]。

如果您还使用jQueryUI，则会获得:data选择器的（简单）版本，该选择器会检查数据项的存在，因此可以执行$("div:data(view)")，或$( this ).closest(":data(view)")。

请参阅http://api.jqueryui.com/data-selector/。我不知道他们已经住了多久了，但是现在在那里！

这是一个简化生活的插件https://github.com/rootical/jQueryDataSelector

像这样使用它：

data selector           jQuery selector
  $$('name')              $('[data-name]')
  $$('name', 10)          $('[data-name=10]')
  $$('name', false)       $('[data-name=false]')
  $$('name', null)        $('[data-name]')
  $$('name', {})          Syntax error