Javascript 使用数组中的多个选择器查询DOM

我有四个类，我想对它们执行单独但相关的样式更改。我想创建一种二维数组，在适当的数组中包含每个类的元素。我也只想在加载文档之后执行一次，这样就不必重复查询DOM

像这样的事情似乎奏效了。如果我放入

console.log（值）在变量赋值之后，我在控制台中获得HTMLCollection。但我不知道以后如何读取数组中的每个变量

var makeArrays = (function() {
    var borderClasses = ["inner-border", "middle-border", "outer-border", "shadow"];

    function getNodes() {
      $.each(borderClasses, function(index, value) {
        makeClassName =  "." + value;
        value = $( makeClassName );
      });
    }

})();

这是我的原始代码。我正在尝试重构它，以便只查询DOM一次，然后公开该结果（并去掉
setInterval（）
）

看起来一个对象更适合您的目的，您可以通过编写例如myNodes[“shadow”]来检索节点

试试这个

var makeArrays = (function() {
    var borderClasses = ["inner-border", "middle-border", "outer-border", "shadow"];

    var value = borderClasses.map(function (borderClass) {
        return $('.' + borderClass);
    });

    value.forEach(function (borderClass, index) {
         console.log(borderClasses[index], value[index]); // or just borderClass, but making a point here
    });

    return value;
})();

我认为您可以将结果存储在
数组中
并返回它，这样您就可以在需要时访问返回的选择器列表

完整JS:

var makeArrays = (function() {
    var selectedElements = {};
    var borderClasses = ["inner-border", "middle-border", "outer-border", "shadow"];

    $.each(borderClasses, function(index, value) {
        selectedElements[value] = $("."+value);
    });

    return selectedElements;
})();

访问按类选择的元素：

makeArrays["inner-border"]; //will return selected element with class inner-border
makeArrays["shadow"]; //will return selected element with class shadow

看看
FWIW，
值
不是
HTMLCollection
，它是一个jQuery选择。哇，太棒了！我在
.map
方面遇到了很多麻烦。我没有资格给你投票，但非常感谢。你不应该把JavaScript数组当作关联数组，如果你要生成关联数组，请使用
var myArray={}这其实是一个用词不当的词。
var makeArrays = (function() {
    var selectedElements = {};
    var borderClasses = ["inner-border", "middle-border", "outer-border", "shadow"];

    $.each(borderClasses, function(index, value) {
        selectedElements[value] = $("."+value);
    });

    return selectedElements;
})();

makeArrays["inner-border"]; //will return selected element with class inner-border
makeArrays["shadow"]; //will return selected element with class shadow