基于部分属性查找HTML
基于部分属性查找HTML
提问于 2012-08-30 22:19:04
javascript (特别是jQuery)有没有办法根据部分属性名来查找元素
我不是在寻找任何可以找到这些链接中引用的部分属性值的选择器：
- starts with name^="value"
- contains prefix name|="value"
- contains name*="value"
- contains word name~="value"
- ends with name$="value"
- equals value“
- not equal name!="value"
- starts with name^="value"
”name=
但更多的是类似于
<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>和
$("[^data-api]").doSomething()查找具有以"data-api“开头的属性的任何元素。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-30 22:59:08
不知道你要找的是什么，只是花了几分钟写下：
$.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-* )的元素，您可以对其进行扩展和修改以包含更多选项等，但目前它只搜索数据属性，并且只匹配“以”开头，但至少它使用起来很简单？
Stack Overflow用户
发布于 2012-08-30 23:09:53
这将使用.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/
此选择器应适用于jQuery 1.8之前的版本。对于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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12199008
复制相关文章
相似问题