javascript - 按自定义数据属性值查找元素

Question

我想知道是否有一种方法可以根据其数据属性值使用带有 jQ​​uery（+ jQuery UI lib）的 javascript 来选择一个项目（div、span、whatever ..）。例如，假设我有：

<div class="b">Hi</div>

然后我为它分配一些数据：

$('.b').data('myKey', 1234);

然后，我想找到一个满足条件 myKey = 1234 的 div（或多个 div）。例如，像这样：

var resultingElement = $('.b:data(myKey=1234)');

默认情况下可以吗，还是我必须自己实现这种选择器？不，我不想为此使用 HTML5 的可见 data-* 属性。

Answer 1

您可以创建一个自定义伪选择器来简化操作：http: //jsfiddle.net/g2xKB/1/。

$.expr.pseudos.data = $.expr.createPseudo(function(args) {
    var items = args.split(",");  // the arguments (key, value)

    $.each(items, function(i, item) {
        item = item.trim();
        var isString = /^['"]|['"]$/.test(item);
        item = item.replace(/^['"]|['"]$/g, "");  // remove quotes

        if(!isString) {
            item = +item;  // if no quotes, it's a number
        }

        items[i] = item;
    });

    return function(elem) {
        return $.data(elem, items[0]) === items[1];
    }
});

然后，您可以按如下方式使用它：

$(".b:data('myKey', 1234)").css("color", "red");

Answer 2

试试这个

    $("div.b").filter(function() { 
          return $.data(this, "myKey") == 1234; 
    });

Answer 3

var resultingElement = $('.b[data-myKey=1234]');

我不确定 100% 肯定，但我认为数据属性中的驼峰式选择器在某些时候存在问题。