jQuery wildcard selector

jquery, jquery-selectors, wildcard

Solution

I'd suggest:

$('*').filter(
    function(){
        var that = $(this),
            data = that.data();
        for (var a in data){
            if (data.hasOwnProperty(a)){
                return /^something/.test(a);
            }
        }
    }).css('color','red');

JS Fiddle demo.

Edited to offer a simple jQuery plugin that achieves the same, requiring you pass in a regular expression:

$.fn.hasAttrMatching = function (expr) {
    var reg, data;
    if (!expr) {
        return this;
    } else {
        if (typeof expr === 'string') {
            reg = new RegExp(expr);
        } else if (typeof expr === 'object' && expr.test) {
            reg = expr;
        }
        return this.filter(function () {
            data = $(this).data();
            for (var a in data) {
                if (data.hasOwnProperty(a)) {
                    return reg.test(a);
                }
            }
        });
    }
};

JS Fiddle demo.

This can be called as follows, using a literal regular expression:

$('body, body *').hasAttrMatching(/^something/).css('color', 'red');

Using a string representation of a regular expression:

`$('body, body *').hasAttrMatching('^something').css('color', 'red');`

It seems somewhat obvious to remind you, at this point, but if no expression is passed in (as either a regex literal or a string) then no filtering will occur, the plugin will return the same elements it received, to illustrate:

`$('body, body *').hasAttrMatching().css('color', 'red');`

Which, as you can see in the linked demo, colours all elements matched by the original selector.

References:

- Plain JavaScript:

- JavaScript regular expressions.

- `Object.hasOwnProperty()`.

- `test()`.

- `typeof` operator.

- jQuery:

- `css()`.

- `filter()`.

Problem

I want to select all the elements that have attribute starting with `data-something-` For example ``` <span data-something-random="test">span 1</span> <span data-nope="nope">span 2</span> <span data-something-else="another test">span 3</span> ``` From the above example, I want to select span 1 and span 3. I've tried ``` $('*[$data-validate]') ``` But it didn't work. Alternative ways involving jQuery method instead of pseudo selectors are also welcome.

Original source