javascript - javascript获取数据属性，使用循环不起作用

Question

我正在尝试使用核心 javascript 获取每个元素的“数据编号”。我无法在这里使用 jquery，因为我正在编辑一个插件。

但我无法获取数据

html:

<ul>
    <li data-number="2" class="number">1</li>
    <li class="number">2</li>
    <li class="number">3</li>
</ul>

js：

for(i=0;i<3;i++){
var x = document.getElementsByClassName('.'+number)[i].getAttribute("data-number");
    console.log(x); // i am not getting the result.
}

这是jsfiddle

提前致谢

Answer 1

getElementsByClassName如果您使用并且如果name是“数字” ，请删除点：

document.getElementsByClassName(name)

您似乎将它与将 CSS 选择器作为参数的querySelectorAll混淆了。

在您的小提琴中，您还忘记定义 name ：

var name = "number";

Fixed fiddle

Answer 2

getElementsByClassName采用类的名称，而不是选择器。

document.getElementsByClassName('number')

简单地迭代元素也很好。

var elements = document.getElementsByClassName('number');
for (var i = 0; i < elements.length; i++){
  var x = elements[i].getAttribute('data-number');
  console.log(x);
}