html5查询通配符,在HTML5数据属性通配符(Wildcards in HTML5 data attributes)

是否有可能找到所有的DOM元素使用jQuery在属性名通配符？

考虑下面的HTML：

id="val1"

type="text"

data-validate-required

data-validate-minlength="3"

data-validate-email />

我试图实现是要找到所有的DOM节点与属性名称以data-validate-

据我了解所描述的通配符这里所关注的属性的“值”。

这样做的原因是 - 我想找出哪些元素应该不惜一切被验证 - 事后找出验证参数(如-email)进来玩。

谢谢

Answer 1:

您可以创建一个自定义的伪类到如匹配的属性名称对一个正则表达式： http://jsfiddle.net/hN6vx/ 。

jQuery.expr.pseudos.attr = $.expr.createPseudo(function(arg) {

var regexp = new RegExp(arg);

return function(elem) {

for(var i = 0; i < elem.attributes.length; i++) {

var attr = elem.attributes[i];

if(regexp.test(attr.name)) {

return true;

}

}

return false;

};

});

用法：

$(":attr('^data-')")

Answer 2:

因为jQuery严重依赖的XPath和XPath不支持通配符属性选择-这是不可能的，没有你正在寻找避免的开销。

总有创建自己的选择，只是为了保持清洁的可能性：

//adds the :dataValidate selector

$.extend($.expr[':'],{

dataValidate: function(obj){

var i,dataAttrs=$(obj).data()

for (i in dataAttrs) {

if (i.substr(0,8)=='validate') return true;

}

return false;

}

})

这将允许您使用：dataValidate在你的正常jQuery选择：

$(".element:dataValidate .etc")

工作的jsfiddle： http://jsfiddle.net/rZXZ3/

Answer 3:

你可以在atributes循环：

$('.element').each(function() {

$.each(this.attributes, function(i, att){

if(att.name.indexOf('data-validate')==0){

console.log(att.name);

}

});

});

Answer 4:

您可以使用filter的方法和dataset对象：

允许访问，无论是在阅读和写作模式，所有的自定义数据属性(数据并行*)在元素上设置。 这是地图为DOMString一个，每个自定义数据属性的一个条目。

$("input").filter(function(){

var state = false;

for (i in this.dataset)

if (i.indexOf('validate') > -1) state = true;

return state

})​

http://jsfiddle.net/Pxpfa/

文章来源: Wildcards in HTML5 data attributes