根據部分屬性查找HTML

Question

有沒有用javascript（特別是jQuery）根據部分屬性查找元素的方法名稱？

我不找任何在這些鏈接引用該發現部分屬性值選擇的：

• starts with [名^ =「值」]
• contains prefix [名稱| =「值」 ]
• contains [名稱* = 「值」]
• contains word [名〜= 「值」]
• ends with [名$ = 「值」]
• equals [名稱= 「值」]
• not equal [名字！= 「值」]
• starts with [名^ = 「值」]

，但更多的東西沿着

線

<div data-api-src="some value"></div> 
<div data-api-myattr="foobar"></div> 

和

$("[^data-api]").doSomething() 

到f指定具有以「data-api」開頭的屬性的任何元素。

Answer 1

不知道它是什麼，你要尋找的，只是花了幾分鐘寫這篇：

$.fn.filterData = function(set) { 
    var elems=$([]); 
    this.each(function(i,e) { 
     $.each($(e).data(), function(j,f) { 
      if (j.substring(0, set.length) == set) { 
       elems = elems.add($(e)); 
      } 
     }); 
    }); 
    return elems; 
} 

的情況下使用，如：

$('div').filterData('api').css('color', 'red'); 

而且將匹配與任何元素數據屬性如data-api-*，您可以擴展和修改它以包含更多選項等，但現在它只搜索數據屬性，只匹配'開頭'，但至少使用起來很簡單？

FIDDLE

Answer 2

這使用.filter()限制考生那些具有data-api-*屬性。可能不是最有效的方法，但如果您可以先用相關選擇器縮小搜索範圍，則可用。

$("div").filter(function() { 
    var attrs = this.attributes; 
    for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;  
    }; 
    return false; 
}).css('color', 'red'); 

演示：http://jsfiddle.net/r3yPZ/2/

---

這也可以寫爲一個選擇器。這是我的新手嘗試：

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) { 
    for (var i = 0; i < obj.attributes.length; i++) { 
     if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true; 
    }; 
    return false; 
}; 

用法：

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red'); 

演示：http://jsfiddle.net/SuSpe/3/

這個選擇應該預先1.8版本的jQuery的工作。爲1。8及以上，some changes may be required。下面是在一個標準的1.8版本的嘗試：

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) { 
    return function(obj) { 
     for (var i = 0; i < obj.attributes.length; i++) { 
      if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true; 
     }; 
     return false; 
    }; 
}); 

演示：http://jsfiddle.net/SuSpe/2/

---

對於一個更通用的解決方案，下面是需要一個正則表達式模式與匹配模式的屬性選擇元素選擇：

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) { 
    var re = new RegExp(regex); 
    return function(obj) { 
     var attrs = obj.attributes 
     for (var i = 0; i < attrs.length; i++) { 
      if (re.test(attrs[i].nodeName)) return true; 
     }; 
     return false; 
    }; 
}); 

對於你的榜樣，這樣的事情應該工作：

$('div:hasAttr(^data-api-.+$)').css('color', 'red'); 

演示：http://jsfiddle.net/Jg5qH/1/