在不传递 HTML 元素 ID 的情况下获取数据属性值答案

【问题标题】：get data- attributes values without pass HTML element id在不传递 HTML 元素 ID 的情况下获取数据属性值
【发布时间】：2013-04-30 04:57:34
【问题描述】：

我有 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 来获取数据 -* 值。

【问题讨论】：

标签： jquery html dom unobtrusive-javascript custom-data-attribute

【解决方案1】：

你可以通过

$("input[type='hidden']").attr('data-abc-value1')
//or 
$('input[data-abc-value1]').attr('data-abc-value1')

【讨论】：

【解决方案2】：

在 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'));
        });

【讨论】：

【解决方案3】：

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

});

http://jsfiddle.net/UPH6R/1/

【讨论】：

【解决方案4】：

试试这个代码，这可能对你有帮助

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/

【讨论】：

它确实有效但有效吗？这会在两个嵌套的eaches中遍历所有隐藏的输入及其所有属性，因此复杂性呈指数级增长......为什么不对与之关联的每个输入/记录使用某种唯一的ID？
当然，使用唯一 id 会有效并提高性能，但 @SCP 出于某种原因不想使用 id。我的建议是，至少可以减少迭代次数，而不是遍历所有隐藏的输入使用类。

【解决方案5】：

当 jQuery 可用时，使用 .attr() 函数获取 w3c 无效属性。还使用.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");

【讨论】：