HTML5 数据属性中的通配符

Question

是否可以使用属性名称中带有通配符的 jQuery 查找所有 DOM 元素？

考虑以下 HTML：

<input 
     id="val1" 
     type="text" 
     data-validate-required 
     data-validate-minlength="3" 
     data-validate-email />

我想要实现的是找到所有属性名称以data-validate-开头的dom节点

据我了解，here 所描述的通配符与属性的“值”有关。

这样做的原因是 - 我想找出应该验证哪些元素 - 然后找出起作用的验证参数（如 -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;
    }
})

这将允许您在普通的 jQuery 选择器中使用 :dataValidate：

$(".element:dataValidate .etc")

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

Answer 3

你可以遍历属性：

$('.element').each(function() {
  $.each(this.attributes, function(i, att){
     if(att.name.indexOf('data-validate')==0){
         console.log(att.name);
     }
  });
});

Answer 4

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

允许在读取和写入模式下访问元素上设置的所有自定义数据属性 (data-*)。它是 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/