Question

我的代码看起来像这样：

<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，如果我能帮助它的话。

Answer 1

getElementsByTagName() 会返回具有给定标记名称的元素列表，因此您需要使用[]访问此列表中的元素：

var effectData = document.getElementById("effects-list").getElementsByTagName("li")[0];

<强> Updated Fiddle

如果您正在寻找jQuery解决方案，可以使用 .data() ：

var creative = $('#effects-list').find('li').data('creative');

<强> Updated Fiddle

Answer 2

尝试以下代码

var dataCreative = $("#effects-list li").attr('data-creative');
alert(dataCreative);

这是有效的JSFiddle。

如果li内有多个ul，那么您可以使用.each，请参阅下面的代码

$("#effects-list li").each(function(){
    var dataCreative = $(this).attr('data-creative');
    alert(dataCreative);
});

一起使用getElementById和getElementsByTagName

2 个答案: