基于分部属性查找HTML
Find HTML based on partial attribute
javascript(尤其是jQuery)有没有一种方法可以基于分部属性name找到元素?
我不是在寻找任何能找到这些链接中引用的部分属性值的选择器:
- 以[name ^="value"]开头
- 包含前缀[名称|="值"]
- 包含[名称*="值"]
- 包含单词[name ~="value"]
- 以[name$="value"]结尾
- 等于[name="value"]
- 不等于[name!="value"]
- 以[name ^="value"]开头
但更多的是类似的东西
<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>
和
$("[^data-api]").doSomething()
查找任何具有以"dataapi"开头的属性的元素。
这使用.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及以上版本,可能需要进行一些更改。以下是对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/
不确定你在寻找什么,但只花了几分钟写了这个:
$.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-*
等数据属性的元素,您可以扩展和修改它以包括更多选项等。但目前它只搜索数据属性,只匹配"starts with",但至少使用起来很简单?
FIDDLE
相关文章:
- 基于分部属性查找HTML
- 如何在node.js中查找HTML元素的高度
- 如何通过其值查找 HTML 元素
- 使用 javascript 查找 html 页面中元素的位置
- 使用 RegEx 查找 HTML 标记之间的内容
- 如何通过来自不同父元素的相同元素查找 HTML 元素
- 如何在 javascript 中查找 html 子字符串,包括 html 字符串中的标记
- 使用jquery查找html输入类型的id
- 使用jQuery在并行树路径中查找html元素
- 如何查找HTML标记名是否为独立标记名
- javascript查找html<tr>具有类并且具有嵌套<td>
- DOM:查找html元素的当前滚动上下文
- 如何动态查找HTML文档的主要内容DIV
- 如何查找html文件的父目录名
- 如何通过javaScript查找html节点
- 如何根据文本查找HTML元素,然后分配ID
- 查找html元素并将其替换为特定文本
- 在特定的结束标记旁边查找HTML元素
- 在文本选择的基础上更改一些查找html
- 查找html列表中第n个元素列表项的最佳方法