根据部分属性查找HTML
有没有办法使用javascript（特别是jQuery）来查找基于部分属性名称的元素？
我不是在寻找找到这些链接中引用的部分属性值的任何选择器：
- 以 [name ^ =“value”] 开头
- 包含前缀 [name | =“value”]
- 包含 [name * =“value”]
- 包含单词 [name~ =“value”]
- 以 [name $ =“value”] 结尾
- 等于 [name =“value”]
- 不等于 [name！=“value”]
- 以 [name ^ =“value”] 开头
但更多的东西是这样的
和
$("[^data-api]").doSomething()
查找具有以“data-api”开头的属性的任何元素。
不确定你在寻找什么，但只花了几分钟写这个：
$.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-*等数据属性进行匹配，您可以对其进行扩展和修改以包含更多选项等，但现在它只搜索数据属性，并且只匹配’以’开头’，但是至少它使用简单？
小提琴
这使用.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及更高版本， 可能需要进行一些更改 。 这是一个符合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/