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.

jQuery's selector syntax is CSS-like, but it is not the same as CSS. Which type of selector are you trying to write? Neither library supports inexact attribute _name_ matching, but if you're writing JavaScript there are workarounds. — Matt Ball, May 23 '13 at 22:52
There isn’t a way with CSS, but there is a API in HTML5 to get data attributes using dataset http://www.w3.org/html/wg/drafts/html/master/dom.html#dom-dataset — David Storey, May 23 '13 at 23:00
@jli: There's no selector. `getElementsByTagName` with a filtering function will be the fastest thing that you can do. — Blender, May 24 '13 at 01:43
There is no native selector to do that, and why you will find that most of the unobtrusive javascript libraries look for a specific data attribute. For example `` then you can write an unobstrusive javascript library that looks for anything with a `data-confirm` attribute, then attach an event handler to it displaying the `data-confirm-message message` and cancel the event if they click cancel on the confirm message. — Robert McKee, May 24 '13 at 03:30
It looks like there is no viable way of doing this via `querySelectorAll`. Thanks for the input. — jli, May 25 '13 at 00:29

score 4 · Answer 1 · answered May 23 '13 at 22:57

4

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/

answered May 23 '13 at 22:57

Ram

143,282
16
168
197

`.lastIndexOf('data', 0) === 0` for extreme millerseconds difference as well. – Fabrício Matté May 23 '13 at 22:59
@FabrícioMatté: Won't make much of a difference, `$.grep` doesn't break out once the first `data-` attribute is found. – Blender May 23 '13 at 23:03
@Blender I know, I just meant that this operation would be a tad bit faster than `indexOf`. Here are the details http://stackoverflow.com/a/4579228/1331430 – Fabrício Matté May 23 '13 at 23:05
I didn't make this clear originally, but the reason I'm using a selector like this at all is to avoid iterating over all nodes/attributes (for perf reasons). Unfortunately anything less than a native solution wouldn't work, I think. – jli May 24 '13 at 00:42

Blender · Answer 2 · 2013-05-23T23:06:27.580

4

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.

edited May 23 '13 at 23:06

answered May 23 '13 at 22:59

Blender

289,723
53
439
496

ya it's a little overkill but still an interesting one – A. Wolff May 23 '13 at 23:03

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

2 Answers2