HTML5數據屬性中的通配符

Question

是否可以在屬性名稱中使用帶有通配符的jQuery查找所有DOM元素？

請考慮以下HTML：

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

我想要實現的是找到所有具有以data-validate-開頭的屬性名稱的dom節點

據我所知， 這里描述的通配符與屬性的“值”有關。

原因是 - 我想知道哪些元素應該被驗證 - 然后找出哪些驗證參數（如-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/