如何訪問數組中的類並使用javascript設置樣式

Question

假設我有3個不同的類別：一，二和三。 每個班級都有3個div，如下所示：

<div class="one"></div>
<div class="one"></div>
<div class="one"></div>

<div class="two"></div>
<div class="two"></div>
<div class="two"></div>

<div class="three"></div>
<div class="three"></div>
<div class="three"></div>

然后給每個類一個變量：

var _1 = document.getElementsByClassName("one");
var _2 = document.getElementsByClassName("two");
var _3 = document.getElementsByClassName("three);

然后，將它們全部放入一個數組調用nums中：

var nums = [_1,_2,_3];

如果我想然后遍歷並更改類中每個div的文本顏色：一，二和三。 如果不做這樣的事情，我該怎么做：

function textColor() {
  var i;
  for (i = 0; i < _1.length; i++) {
    _1[i].style.color = "red";
  }

for (i = 0; i < _2.length; i++) {
        _2[i].style.color = "red";
      }

for (i = 0; i < _3.length; i++) {
        _3[i].style.color = "red";
      }
}

我真的很想只有一個for循環，該循環將獲取nums數組中的所有項目，然后遍歷並從nums的每個項目中獲取每個div並更改文本顏色。

Answer 1

將它們放入nums時使用concat （ 並將NodeLists轉換為數組 ）

var nums = Array.from(_1).concat(Array.from(_2)).concat(Array.from(_3));

或使用點差運算符

var nums = [..._1,..._2,..._3];

那你可以做

function textColor() {
  nums.forEach(node => node.style.color = 'red');
}

Answer 2

您可以像這樣將nums數組展平：

var flatNums = [].concat.apply([],nums)

然后通過它：

for (i = 0; i < flatNums.length; i++) {
    flatNums[i].style.color = "red";
}

Answer 3

我會做這樣的事情：
$(".one, .two, .three").prop("style","color: red;");

或為所有九個div添加第二類。

Answer 4

如果將相同的樣式應用於所有div，則可以進一步簡化操作：

divs=document.querySelectorAll('.one, .two, .three');
divs.forEach(function(el) {
el.style.color='red';
})

 divs=document.querySelectorAll('.one, .two, .three'); divs.forEach(function(el) { el.style.color='red'; }) 

 <div class="one">1</div> <div class="one">2</div> <div class="one">3</div> <div class="6"> skip </div> <div class="two">4</div> <div class="two">5</div> <div class="two">6</div> <div class="three">7</div> <div class="three">8</div> <div class="three">9</div>