4

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

考虑以下 HTML：

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

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

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

这样做的原因是 - 我想找出应该验证哪些元素 - 然后找出哪些验证参数（如 -email）起作用。

谢谢

4

4 回答 4

5

您可以创建自定义伪类，例如将属性名称与正则表达式匹配：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-')")
于 2012-11-04T20:22:05.003 回答
3

因为 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/

于 2012-11-04T20:32:09.157 回答
2

您可以遍历属性：

$('.element').each(function() {
  $.each(this.attributes, function(i, att){
     if(att.name.indexOf('data-validate')==0){
         console.log(att.name);
     }
  });
});
于 2012-11-04T20:08:39.050 回答
2

您可以使用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/

于 2012-11-04T20:19:16.897 回答