有没有办法找到所有具有以特定字符串开头的属性的元素？
我正在使用 Mootools 框架，这是我尝试过的：
$$('*[data-media-*]');
但它只是输出页面中的所有元素。
那么有没有办法获取页面中所有属性以data-media-开头的元素？
【问题讨论】：
标签： javascript html mootools css-selectors
您可以通过迭代容器中每个元素的属性并查看属性名称是否与您要查找的正则表达式匹配来近似这样的事情：
例如，in this jsFiddle, I am looking for li elements with the data-media-tv and data-media-dvd properties。
您可以定制正则表达式以仅返回您想看到的内容。只想查看具有 data-media-* 的元素（如您的问题）？ Here you go.
请记住，这不是完全可扩展的。因为我们正在遍历页面上的每一个元素，并检查每一个属性（但如果找到则提前返回），这对于大页面来说可能而且可能会很慢。
仅限于您想要搜索的容器，或者仅限于您想要迭代的元素！如果您针对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 中，只传入您要检查的元素，可能通过$$ 选择。如果要检查容器元素中的所有元素，请在上述element 的每个实例中将elements 替换为container 和container.getChildren()。
【讨论】：
试试this jsfiddle
只需知道属性data-media-* 的（通用）索引/位置并相应地在代码中使用。
【讨论】：
您可以过滤已经必须返回具有匹配 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-)"));
【讨论】：
$$('div[attrName="attrnameValue"]').each(function() {
// `this` is the div
});
【讨论】：