Javascript 基于部分属性查找HTML
javascript(特别是jQuery)有没有办法基于部分属性名查找元素 我不寻找任何选择器,它们可以找到这些链接中引用的部分属性值:Javascript 基于部分属性查找HTML,javascript,jquery,jquery-selectors,Javascript,Jquery,Jquery Selectors,javascript(特别是jQuery)有没有办法基于部分属性名查找元素 我不寻找任何选择器,它们可以找到这些链接中引用的部分属性值: [name^=“value”] [名称|=“值”] [名称*=“值”] [名称=“值”] [名称$=“值”] [name=“value”] [名称!=“值”] [name^=“value”] 但更多的是类似于 <div data-api-src="some value"></div> <div data-api-myattr=
- [name^=“value”]
- [名称|=“值”]
- [名称*=“值”]
- [名称=“值”]
- [名称$=“值”]
- [name=“value”]
- [名称!=“值”]
- [name^=“value”]
<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>
要查找具有以“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');
并将匹配任何具有数据属性的元素,如数据api-*
,您可以对其进行扩展和修改以包含更多选项等。但现在它只搜索数据属性,并且只匹配“开始于”,但至少使用起来很简单
这使用.filter()
将候选对象限制为具有数据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');
演示:
此选择器应适用于jQuery的1.8之前版本。对于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;
};
});
演示:这个问题可能会有帮助:它是否总是一个“数据-”属性?@ianpgall很有可能,是的。它们在某种程度上是相似的(比如数据api),那么属性名的其余部分可能有意义。@jrummell这似乎仍然需要知道整个数据键。在本例中,我可能有一系列数据api-*键,并希望找到与它们匹配的任何东西。这是一个很好的解决方案。我喜欢将它用作选择器。谢谢
$.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');
$.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;
};
});
$.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');