提问人：SCP 提问时间：5/6/2013 更新时间：9/9/2019 访问量：3033
获取数据属性值而不传递 HTML 元素 ID
get data- attributes values without pass HTML element id
问：
我有 INPUT HTML 标签，其类型在视图中隐藏。它看起来如下：
<input type="hidden" data-abc-value1="value1" data-abc-value2="value2" data-abc-
value3="value3"/>
我想在不将元素 id 传递给它的情况下获取 data- attributes（data-abc-value1，data-abc-value2，data-abc-value3） 的值。
我能否以某种方式为元素找到匹配的data-abc（这是通用的）属性并获取其值。这样我就可以避免依赖元素 id 来获取数据 -* 值。
答：
1赞
Tim Vermaelen
5/6/2013
#1
当 jQuery 可用时，使用该函数获取 w3c 无效属性。
还用于确保您选择第一个也是唯一一个隐藏的输入字段。如果有更多隐藏的输入字段，则无法保证这会起作用。.attr().eq(0)
var inp1 = $("input[type=hidden]").eq(0),
val1 = inp1.attr("data-abc-value1"),
val2 = inp1.attr("data-abc-value2"),
val3 = inp1.attr("data-abc-value3");
0赞
Sai Chaithanya
5/6/2013
#2
您可以通过以下方式获得它们
$("input[type='hidden']").attr('data-abc-value1')
//or
$('input[data-abc-value1]').attr('data-abc-value1')
2赞
moustacheman
5/6/2013
#3
试试这个代码，这可能会对你有所帮助
[HTML全文]
<input type="hidden" data-abc-value1="value1" data-abc-value2="value2" data-abc-value3="value3" />
脚本
$('input[type="hidden"]').each(function(i, e){
$.each(e.attributes, function(j,v){
if(/^data-abc/.test(v.nodeName)) {
console.log(v.nodeName, v.nodeValue);
}
});
});
演示 JS http://jsfiddle.net/UYNsw/
评论
0赞
Borislav Sabev
5/7/2013
它确实有效，但有效吗？这将遍历所有隐藏的输入及其所有属性，每个输入都嵌套在两个嵌套中，因此复杂性呈指数级增长......为什么不对它所关联的每个输入/记录使用某种唯一的 ID？
0赞
moustacheman
5/7/2013
当然，使用唯一 ID 会很有效并提高性能，但出于某种原因，@SCP不想使用 id。我的建议是，与其遍历所有隐藏的输入，不如使用类，至少可以减少迭代次数。
2赞
cfs
5/6/2013
#4
jQuery不提供按部分属性名称进行查询的方法，因此您必须获取所有隐藏的输入，然后使用正则表达式按属性过滤结果：
$(function() {
var inputs = $('input[type="hidden"]').filter(function() {
var attrs = this.attributes; //get attribute collection for this element
for(var i=0; i<attrs.length; i++) {
if(/data-abc-*/.test(attrs[i].name)) {
return true; //adds this element to the jquery collection
}
}
return false;
});
//do something with inputs
});
1赞
vijay
5/6/2013
#5
查看 jsFiddle http://jsfiddle.net/vijaypatel/xk42F/ 中的示例
$.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;
}
$.each($('input').filterData('abc'), function (index, value) {
alert($(this).attr('data-abc-value1'));
});
评论