有没有用JavaScript(特别是jQuery的)办法找到根据部分属性名称的元素?
我不想找任何发现在这些链接引用的部分属性值选择的:
- 开头 [名^ =“值”]
- 包含前缀 [名称| =“值”]
- 包含 [名称* = “值”]
- 包含字 [名〜=“值”]
- 结尾 [名$ =“值”]
- 等于 [名称=“值”]
- 不等于 [名字!=“值”]
- 开头 [名^ =“值”]
但沿线的更多的东西
<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>
和
$("[^data-api]").doSomething()
发现有以“数据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/