[英]Wildcards in HTML5 data attributes
Is it possible to find all DOM elements with jQuery with wildcards in the attribute name? 是否可以在属性名称中使用带有通配符的jQuery查找所有DOM元素?
Consider the following HTML: 请考虑以下HTML:
<input
id="val1"
type="text"
data-validate-required
data-validate-minlength="3"
data-validate-email />
What I am trying to achieve is to find all dom nodes with an attribute name starting with data-validate-
我想要实现的是找到所有具有以
data-validate-
开头的属性名称的dom节点
As far as I understand the wildcards described here are concerned with "value" of the attribute. 据我所知, 这里描述的通配符与属性的“值”有关。
The reason for this is - I want to find out which elements should be validated at all - and afterwards find out which validation parameters (like -email) comes in play. 原因是 - 我想知道哪些元素应该被验证 - 然后找出哪些验证参数(如-email)正在发挥作用。
Thanks 谢谢
You can create a custom pseudoclass to eg match attribute names against a regexp: http://jsfiddle.net/hN6vx/ . 您可以创建一个自定义伪类,例如将属性名称与正则表达式匹配: 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;
};
});
Usage: 用法:
$(":attr('^data-')")
Because JQuery relies heavily on XPath , and XPath does not support wildcard attribute selection - it is not possible without the overhead you're looking to avoid. 因为JQuery在很大程度上依赖于XPath ,并且XPath不支持通配符属性选择 - 如果没有你想要避免的开销,这是不可能的。
There's always the possibility of creating your own selector, just to keep things clean: 总是有可能创建自己的选择器,只是为了保持清洁:
//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;
}
})
Which will allow you to use :dataValidate in your normal jQuery selectors: 这将允许您在普通的jQuery选择器中使用:dataValidate:
$(".element:dataValidate .etc")
Working JSFiddle: http://jsfiddle.net/rZXZ3/ 工作JSFiddle: http : //jsfiddle.net/rZXZ3/
You could loop over the atributes: 你可以循环遍历属性:
$('.element').each(function() {
$.each(this.attributes, function(i, att){
if(att.name.indexOf('data-validate')==0){
console.log(att.name);
}
});
});
You can use filter
method and dataset
object: 您可以使用
filter
方法和dataset
对象:
Allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element.
允许在读取和写入模式下访问元素上设置的所有自定义数据属性(data- *)。 It is a map of DOMString, one entry for each custom data attribute.
它是DOMString的映射,每个自定义数据属性都有一个条目。
$("input").filter(function(){
var state = false;
for (i in this.dataset)
if (i.indexOf('validate') > -1) state = true;
return state
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.