Question

Is there a way to find all the elements with attributes that start with a particular string?

I am using Mootools framework and this is what I have tried:

$$('*[data-media-*]');

But it just outputs all the elements in the page.

So is there a way to get all the elements in the page that have attributes that start with, data-media-?

Answer 1

you can filter elements that you already have to return ones with matching data-* attributes.

Elements.implement({
    filterData: function(substring){
        return this.filter(function(element){
            var attribs = element.attributes,
                len,
                ii = 0;

            for (len = attribs.length; ii < len; ++ii) {
                if (attribs[ii].name.indexOf('data-') === 0 && attribs[ii].name.indexOf(substring) !== -1) {
                    return true;
                }
            }
        });

    }
});

console.log($$("div").filterData('foo'));
console.log($$("div").filterData('bar'));
console.log($$("div").filterData('oba'));

in action: http://jsfiddle.net/dimitar/pgZDw/

downside: you already need to pass it on a collection of elements that make sense, eg. div.foo or #someid *

a more elegant solution would be to add a :data() pseudo to Slick:

(function(){
    // cache reusable string 
    var data = 'data',
        hyphen = '-',
        // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10)
        XS = this.XMLSerializer && new XMLSerializer();

    Slick.definePseudo(data, function(value){
        return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen));
    });
}());


console.log($$("div:data(foo)"));
console.log($$(":data(media-)"));

updated example: http://jsfiddle.net/dimitar/pgZDw/3/