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/

HTML5数据属性中的通配符

4 个答案: