8

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

我正在使用 Mootools 框架，这是我尝试过的：

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

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

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

4

4 回答 4

2

您可以通过迭代容器中每个元素的属性并查看属性名称是否与您正在寻找的正则表达式匹配来近似这样的东西：

例如，在这个 jsFiddle 中，我正在寻找具有和属性的li元素data-media-tvdata-media-dvd。

您可以定制正则表达式以仅返回您想看到的内容。只想查看具有 data-media-* 的元素（如您的问题）？给你。

请记住，这不是完全可扩展的。因为我们正在遍历页面上的每一个元素，并检查每一个属性（但如果找到则提前返回），这对于大页面来说可能而且可能会很慢。

仅限于您想要搜索的容器，或者仅限于您想要迭代的元素！如果你运行这个document.body，它会遍历页面中的每一个元素，如果你的房子因此被烧毁，我将不负责。:)

这里是函数化的：

function attrMatch(elements, regexp) {
    // Iterate through all passed-in elements, return matches
    var matches = elements.filter(function(li) {
    var numAttr = li.attributes.length;
    for(x=0;x<numAttr;x++) {
        var attr = li.attributes[x];
        return attr['name'].test(regexp);
    }
    });

    return matches;
};

在elements中，仅传入您要检查的元素，可能通过 选择$$。如果要检查容器元素中的所有元素，请在上面的每个实例中替换elements为containerand 。container.getChildren()element

于 2012-09-18T13:50:26.440 回答
2

试试这个 jsfiddle 只知道属性的（常见）索引/位置data-media-*并相应地在代码中使用。

于 2012-09-18T15:32:01.817 回答
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/

于 2012-09-18T14:18:47.597 回答
-3 
$$('div[attrName="attrnameValue"]').each(function() {
    // `this` is the div
});
于 2012-09-18T06:25:20.210 回答