Search code examples
javascriptjqueryhtmlsizzle

Wildcards in HTML5 data attributes

Is it possible to find all DOM elements with jQuery with wildcards in the attribute name?

Consider the following HTML:

<input 
     id="val1" 
     type="text" 
     data-validate-required 
     data-validate-minlength="3" 
     data-validate-email />

What I am trying to achieve is to find all dom nodes with an attribute name starting with data-validate-

As far as I understand the wildcards described here are concerned with "value" of the attribute.

The reason for this is - I want to find out which elements should be validated at all - and afterwards find out which validation parameters (like -email) comes in play.

Thanks

Solution

  • You can create a custom pseudoclass to e.g. match attribute names against a regexp: http://jsfiddle.net/hN6vx/.

    jQuery.expr.pseudos.attr = $.expr.createPseudo(function(arg) {
    var regexp = new RegExp(arg);
    return function(elem) {
        for(var i = 0; i < elem.attributes.length; i++) {
            var attr = elem.attributes[i];
            if(regexp.test(attr.name)) {
                return true;
            }
        }
        return false;
    };
});

    Usage:

    $(":attr('^data-')")