Question

Is there a way with javascript (particularly jQuery) to find an element based on a partial attribute name?

I am not looking for any of the selectors that find partial attribute values as referenced in these links:

• starts with [name^=”value”]
• contains prefix [name|=”value”]
• contains [name*=”value”]
• contains word [name~=”value”]
• ends with [name$=”value”]
• equals [name=”value”]
• not equal [name!=”value”]
• starts with [name^=”value”]

but more something along the lines of

<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>

and

$("[^data-api]").doSomething()

to find any element that has an attribute that starts with “data-api”.

Answer 1

Not sure what it is you’re looking for, but just spent a few minutes writing this:

$.fn.filterData = function(set) {
    var elems=$([]);
    this.each(function(i,e) {
        $.each( $(e).data(), function(j,f) {
            if (j.substring(0, set.length) == set) {
                elems = elems.add($(e));
            }
        });
    });
    return elems;
}

To be used like :

$('div').filterData('api').css('color', 'red');

And will match any elements with a data attribute like data-api-*, and you can extend and modify it to include more options etc. but of right now it only searches for data attributes, and only matches ‘starts with’, but at least it’s simple to use ?

FIDDLE