如何从带共同属性的HTML元素列表提取值生成数组？

嘿，我懂你碰到的问题啦——用$(".L5").attr("letters")只能拿到匹配到的第一个元素的letters属性值，没法直接得到所有元素的属性值组成的数组。这是因为jQuery的.attr()方法在处理多个匹配元素时，默认只返回第一个元素的对应属性，咱们换几种方式就能搞定：

方法一：使用jQuery的.map() + .get() #

这是最贴合你现有jQuery使用场景的方案，代码简洁直接：

var list = $(".L5").map(function() {
  // 遍历每个.L5元素，返回它的letters属性值
  return $(this).attr("letters");
}).get(); // 把jQuery对象转换为普通JS数组

执行后list就会是你想要的['a','b','c','d','e']啦。

方法二：原生JavaScript实现（无需jQuery） #

如果之后想减少对jQuery的依赖，也可以用原生JS的API来实现：

// 获取所有带.L5类的元素
var elements = document.querySelectorAll(".L5");
// 把类数组对象转为数组，并提取每个元素的letters属性
var list = Array.from(elements, element => element.getAttribute("letters"));

这个方法逻辑和jQuery版本一致，只是用了原生的DOM操作API，同样能得到目标数组。

为什么原来的方法失效？ #

再补充下原因：jQuery的.attr()方法的设计逻辑是，当匹配到多个元素时，仅返回第一个匹配元素的属性值，所以你之前的代码只能拿到第一个.L5元素的letters值，没法得到完整的集合。

内容的提问来源于stack exchange，提问作者Hugo LOPEZ