我有这样的代码:
<ul id="effects-list" class="effects-list">
<li data-creative="5">Creative</li>
</ul>
我正在尝试使用以下代码读取上述 HTML 的数据属性:
var effectData = document.getElementById("effects-list").getElementsByTagName("li");
var creative = effectData.getAttribute('data-creative');
alert(creative)
上面的代码不起作用。它抛出以下错误:
effectData.getAttribute is not a function
我在页面上使用 jQuery 并且最初尝试这样做:
var effectData = $('.effects-list li');
同样的错误。
我有什么问题,我该如何解决?
这是一个jsFiddle的代码。
注意:页面上有更多的 li
元素,我读取的数据不仅仅是一个 li
元素。如果可以的话,我尽量避免为每个 li
元素添加单独的 id。
最佳答案
getElementsByTagName() 返回具有给定标签名称的元素列表,因此您需要使用 []
访问此列表中的元素:
var effectData = document.getElementById("effects-list").getElementsByTagName("li")[0];
如果您正在寻找 jQuery 解决方案,您可以使用 .data() :
var creative = $('#effects-list').find('li').data('creative');
关于javascript - 一起使用 getElementById 和 getElementsByTagName,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23645408/