Is there an existing or upcoming CSS3 selector for matching substrings of attribute names?

Question

You can do [foo^="bar"] to match nodes which have the attribute foo with value starting with bar.

Is there a way to match nodes with an attribute name starting with a particular string? The use case of this is to match all nodes with a data-* attribute.

Edit: the reason I'm trying this is to avoid iterating over all the nodes looking for these attributes (for performance reasons). I'd be using querySelectorAll and its Sizzle polyfill for older browsers.

Answer 1

One way is using .filter() method:

$('element').filter(function() {
    return $.grep(this.attributes, function(value) {
       return value.nodeName.indexOf('data') === 0;
    }).length;
});

http://jsfiddle.net/QACsw/

Answer 2

It may be a little overkill, but you could write a custom selector:

$.expr[':'].attr = function (elem, index, regex_str) {
    var regex = new RegExp(regex_str[3]);

    for (var i = 0; i < elem.attributes.length; i++) {
        if (elem.attributes[i].name.match(regex)) {
            return true;
        }
    }

    return false;
};

Demo: http://jsfiddle.net/LBHwr/

So in your case, you'd do:

$('div:attr(^data)') // starts with
$('div:attr(foo$)')  // ends with

It's somewhat similar to the regular attribute selector syntax.