CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Thomas Jones
Thomas Jones

Reputation: 4962

Find HTML based on partial attribute

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:

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".

Upvotes: 23

Views: 5347

Answers (2)

Shawn Chin
Shawn Chin

Reputation: 86844

This uses .filter() to limit the candidates to those that has data-api-* attributes. Probably not the most efficient approach, but usable if you can first narrow down the search with a relevant selector.

$("div").filter(function() {
    var attrs = this.attributes;
    for (var i = 0; i < attrs.length; i++) {
        if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;       
    };
    return false;
}).css('color', 'red');

Demo: http://jsfiddle.net/r3yPZ/2/

This can also be written as a selector. Here's my novice attempt:

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) {
    for (var i = 0; i < obj.attributes.length; i++) {
        if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true;
    };
    return false;
};

Usage:

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red');

Demo: http://jsfiddle.net/SuSpe/3/

This selector should work for pre-1.8 versions of jQuery. For 1.8 and beyond, some changes may be required. Here's an attempt at a 1.8-compliant version:

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) {
    return function(obj) {
        for (var i = 0; i < obj.attributes.length; i++) {
            if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true;
        };
        return false;
    };
});

Demo: http://jsfiddle.net/SuSpe/2/

For a more generic solution, here's a selector that takes a regex pattern and selects elements with attributes that match that pattern:

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) {
    var re = new RegExp(regex);
    return function(obj) {
        var attrs = obj.attributes
        for (var i = 0; i < attrs.length; i++) {
            if (re.test(attrs[i].nodeName)) return true;
        };
        return false;
    };
});

For your example, something like this should work:

$('div:hasAttr(^data-api-.+$)').css('color', 'red');

Demo: http://jsfiddle.net/Jg5qH/1/

Upvotes: 10

adeneo
adeneo

Reputation: 318182

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

Upvotes: 7

Related Questions