javascript - 使用 Javascript 根据 <li class = 'bu' > 的数据值构建数组

Question

从不成功构建数据值数组

我有很多这样的列表

<ul>
<li class="bu" data-value="apple">Apple</li>
<li class="bu" data-value="banana">Banana</li>
<li class="bu" data-value="mango">Mango</li>
</ul>

文档加载后，我尝试使用 javascript 从所有带有 bu 类的列表中获取数据值来构建数组

var br = document.getElementsByClassName("bu");
for (var i = 0; i < br.length; i++) {
 fruit[i] = this.getAttribute('data-value');}

然后我尝试输出，但没有成功..

alert(fruit);
document.write(fruit);

我想构建这样的数组:

var fruit = ["apple", "banana", "mango"];
fruit[1] = "banana"

javascript一定有错误，但我的水平还找不到错误..

我想使用纯 JavaScript，而不使用 Jquery。

Answer 1

this 并不是指在 for 循环内迭代的项目。虽然你可以通过这样做来修复它

fruit[i] = br[i].getAttribute('data-value');
// use push instead if the fruit array is initially empty

您还可以考虑使用Array.from功能性地构造数组:

const fruitArray = Array.from(
  document.getElementsByClassName("bu"), // collection to create the array from
  bu => bu.getAttribute('data-value') // mapper function
);

const fruitArray = Array.from(
  document.getElementsByClassName("bu"), // collection to create the array from
  bu => bu.getAttribute('data-value') // mapper function
);
console.log(fruitArray);

<ul>
  <li class="bu" data-value="apple">Apple</li>
  <li class="bu" data-value="banana">Banana</li>
  <li class="bu" data-value="mango">Mango</li>
</ul>

.dataset一般在IE11及以后的浏览器上支持，其语法比getAttribute好一点，所以如果你不需要支持古老的浏览器，考虑使用它来代替:

const fruitArray = Array.from(
  document.getElementsByClassName("bu"),
  bu => bu.dataset.value
);