javascript - 如何查找具有相同名称约定的所有类名并使用 Javascript 放入数组

Question

大家好，这里需要一点帮助。

我试图在 DOM 中找到所有以相同命名约定开头的类名，并将它们全部放入一个数组中。

例如。

<div class="userName_342">John</div>
<div class="userName_366">Doe</div>
<div class="userName_234">Bob</div>
<div class="userName_873">David</div>

我需要帮助使用一些 JavaScript 将上面的代码制作成下面的数组。

 var classArr = ["userName_342","userName_366","userName_234","userName_873"];

任何关于如何开始的帮助都将不胜感激。

谢谢。

Answer 1

假设相关类始终是这些元素的唯一类，您可以使用"attribute starts with" selector 来实现结合Array#map:

var list = document.querySelectorAll("div[class^=userName_]");
var classArr = Array.prototype.map.call(list, function(div) {
    return div.className;
});

Matt Burland指出如果有多个元素具有相同的类，这将返回一个包含重复条目的数组。解决该问题的两种方法:

Array#reduce，但它的这种用法不是很有效:

var list = document.querySelectorAll("div[class^=userName_]");
var classArr = Array.prototype.reduce.call(list, function(array, div) {
    if (array.indexOf(div.className) === -1) {
        array.push(div.className);
    };
    return array;
}, []);

...或使用临时 map :

var list = document.querySelectorAll("div[class^=userName_]");
var map = {};
Array.prototype.forEach.call(list, function(div) {
    map[div.className] = true;
});
var classArr = Object.keys(map);

---

Array#map, Array#reduce, Array#forEach, Object.keys 都是ES5功能，但如果您需要支持较旧的引擎，则可以对它们进行填充。

querySelectorAll 适用于所有现代浏览器和 IE8。