javascript - 我需要获取所有数据属性和值，例如键 :value pair of a ul li

Question

我有一个 ul 标记，其中有几个 li 元素。每个li都有一些数据属性。

<ul id="elements">
<li id="mtq" data-id="1" data-name="abc">test 1</li>
<li data-id="2">test 2</li>
<li data-id="3" data-name="xyz">test 3</li>
<li data-id="4" data-name="pqr">test 4</li>
<li data-id="5" data-type="text">test 5</li>
<li data-id="7">test 6</li>
</ul>

我需要获取每个 li 的所有数据属性(不带 date- 字符串)和值，例如 key:value，如下所示。

{"id":1,"name":"abc"}

我尝试了下面的 JavaScript 代码，但出现错误，提示 Array.prototype.forEach 在 null 或未定义时调用。

function getDataAttributes(el) {
    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;
        }
    });
    return data;
}

$("#hello").click( function (e) {

    $("ul#elements li").each(function() {
    var data = getDataAttributes($(this));
    console.log(data);
    //var json = JSON.stringify(data, null, 2);
    //el.appendChild(document.createTextNode(json));
    });

});

这是我的jsfiddle。 https://jsfiddle.net/a4vya9m4/26/

当我通过 ID 选择一个 li 时，它会给出答案。我的脚本有什么问题？

Answer 1

您对getDataAttributes想得太多了，您可以在您的el中获取数据集，其中已经有您需要的内容。

function getDataAttributes(el) {
    if(el[0] && el[0].dataset) {
        return Object.assign({}, el[0].dataset);
    }
    return {};
}

el[0].dataset将返回一个DOMStringMap，这就是为什么我使用Object.assing将其转换为普通对象。

希望这对您有帮助。