我有一个 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
时,它会给出答案。我的脚本有什么问题?
最佳答案
您对getDataAttributes
想得太多了,您可以在您的el
中获取数据集,其中已经有您需要的内容。
function getDataAttributes(el) {
if(el[0] && el[0].dataset) {
return Object.assign({}, el[0].dataset);
}
return {};
}
el[0].dataset
将返回一个DOMStringMap
,这就是为什么我使用Object.assing
将其转换为普通对象。
希望这对您有帮助。
关于javascript - 我需要获取所有数据属性和值,例如键 :value pair of a ul li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48963677/