使用javascript/jQuery获取数据列表-*属性

实际上,如果您使用的是jQuery,那么 1.4.3条 1.4.4(由于以下注释中提到的错误), data-* 属性通过 .data() :

从jQuery 1.4.3开始HTML 5 data- 属性将自动 拉入jQuery的数据对象。

注意,字符串保持完整 当JavaScript值被转换时 与其相关的价值(这个 包括布尔、数字、对象, 数组,空)。这个 数据- 属性首先被拉入 访问数据属性的时间和 然后不再被访问或变异 (然后存储所有数据值 在jQuery中)。

这个 jQuery.fn.data 函数将返回 数据- 对象中的属性作为键值对,键是后面属性名的一部分 数据- 值是按照上述规则转换后该属性的值。

我还制作了一个简单的演示,如果你不相信的话: http://jsfiddle.net/yijiang/WVfSg/

还应该提供纯JavaScript解决方案,因为该解决方案并不困难:

var a = [].filter.call(el.attributes, function(at) { return /^data-/.test(at.name); });

这将给出一个属性对象数组,其中 name 和 value 属性:

if (a.length) {
    var firstAttributeName = a[0].name;
    var firstAttributeValue = a[0].value;
}

编辑: 要更进一步,可以通过迭代属性和填充数据对象来获取字典:

var data = {};
[].forEach.call(el.attributes, function(attr) {
    if (/^data-/.test(attr.name)) {
        var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
            return $1.toUpperCase();
        });
        data[camelCaseName] = attr.value;
    }
});

然后您可以访问的值,例如, data-my-value="2" 作为 data.myValue ;

jsfiddle.net/3KFYf/33

编辑: 如果要通过编程方式从对象设置元素的数据属性,可以:

Object.keys(data).forEach(function(key) {
    var attrName = "data-" + key.replace(/[A-Z]/g, function($0) {
        return "-" + $0.toLowerCase();
    });
    el.setAttribute(attrName, data[key]);
});

jsfiddle.net/3KFYf/34

编辑: 如果您使用的是babel或TypeScript,或者只为es6浏览器编写代码,那么这是一个使用es6箭头函数并将代码缩短一点的好地方:

var a = [].filter.call(el.attributes, at => /^data-/.test(at.name));

Have a look here :

如果浏览器还支持HTML5JavaScriptAPI,那么您应该能够通过以下方式获取数据:

var attributes = element.dataset

或

var cat = element.dataset.cat

哦,但我也读过:

不幸的是,新的dataset属性尚未在任何浏览器中实现,因此同时最好使用 getAttribute 和 setAttribute 如前所示。

从2010年5月开始。

如果仍然使用jQuery,您可能需要查看 customdata 插件。不过,我没有这方面的经验。

如上所述 modern browsers 拥有 The HTMLElement.dataset 应用程序编程接口。
这个API给了你一个 DOMStringMap ,您可以检索 data-* 属性只是:

var dataset = el.dataset; // as you asked in the question

您还可以使用 data- 属性的密钥名,如

var data = Object.keys(el.dataset);

或将其值映射为

Object.keys(el.dataset).map(function(key){ return el.dataset[key];});
// or the ES6 way: Object.keys(el.dataset).map(key=>{ return el.dataset[key];});

像这样,您可以迭代这些元素并使用它们,而无需在元素的所有属性之间进行过滤 like we needed to do before .

或转换 gilly3 对jQuery方法的极好回答是:

$.fn.info = function () {
    var data = {};
    [].forEach.call(this.get(0).attributes, function (attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

使用: $('.foo').info() ;

您应该通过数据集属性获取数据

var data = element.dataset;

dataset 是获取数据属性的有用工具

查找所有数据属性的一种方法是使用 element.attributes . 使用 .attributes ,可以循环遍历所有元素属性,筛选出包含字符串“data-”的项。

let element = document.getElementById("element");

function getDataAttributes(element){
    let elementAttributes = {},
        i = 0;

    while(i < element.attributes.length){
        if(element.attributes[i].name.includes("data-")){
            elementAttributes[element.attributes[i].name] = element.attributes[i].value
        }
        i++;
    }

    return elementAttributes;

}

您可以像任何其他对象一样遍历数据属性以获取键和值,下面是如何使用 $.each :

    $.each($('#myEl').data(), function(key, value) {
        console.log(key);
        console.log(value);
    });

我使用嵌套 each -对我来说,这是最简单的解决方案(很容易控制/更改“对值的处理”—在我的示例中,输出数据属性为 ul-list )(Jquery代码)

var model = $(".model");

var ul = $("<ul>").appendTo("body");

$(model).each(function(index, item) {
  ul.append($(document.createElement("li")).text($(this).text()));
  $.each($(this).data(), function(key, value) {
    ul.append($(document.createElement("strong")).text(key + ": " + value));
    ul.append($(document.createElement("br")));
  }); //inner each
  ul.append($(document.createElement("hr")));
}); // outer each

/*print html*/
var htmlString = $("ul").html();
$("code").text(htmlString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="demo"></h1>

<ul>
  <li class="model" data-price="45$" data-location="Italy" data-id="1234">Model 1</li>
  <li class="model" data-price="75$" data-location="Israel" data-id="4321">Model 2</li> 
  <li class="model" data-price="99$" data-location="France" data-id="1212">Model 3</li> 
</ul>

<pre>
<code class="language-html">
  
</code>
</pre>

<h2>Generate list by code</h2>
<br>

密码笔: https://codepen.io/ezra_siton/pen/GRgRwNw?editors=1111