有没有办法搜索以HTML中的某个字符串开头的属性

Question

有没有办法找到具有以特定字符串开头的属性的所有元素？

我正在使用Mootools框架,这是我尝试过的:

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

但它只输出页面中的所有元素.

那么有没有办法让页面中的所有元素都具有以data-media-？开头的属性？

Answer 1

您可以过滤已经必须返回具有匹配 data-* 属性的元素。

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'));

实际应用： http: //jsfiddle.net/dimitar/pgZDw/

缺点：您已经需要将其传递给有意义的元素集合，例如。div.foo 或#someid *

一个更优雅的解决方案是:data()向 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-)"));

更新的示例： http: //jsfiddle.net/dimitar/pgZDw/3/