Как динамически добавить класс в HTMLCollection (проблема преобразования HTMLCollection в массив)?

Question

content = document.getElementsByClassName('outercontent'); 

создает HTMLCollection целевого элемента div.

Я пытаюсь добавить строку для каждого индекса из массива admin1 в список классов каждого элемента div для каждого индекса.

for(var i = 0; i < content.length; i++) {
  content[i].classList.add(admin1[i]);
}

Когда я теперь console.log content, я вижу добавленный новый класс - однако он отображает только первую строку в массиве admin1 для всех div.

Я читал, что вы не можете использовать цикл for для HTMLCollections, поэтому я попытался преобразовать content в массив здесь:

var contentarr = [...content];

Но когда я console.log contentarr, я вижу, что он имеет длину только 1 (индекс 0).

(Это может иметь какое-то отношение к тому факту, что только один из этих элементов div изначально существует в html, пока он не будет умножен на ng-repeat (angularjs)?)

Итак, как я могу преобразовать HTMLCollection в массив, а затем добавить классы из массива admin1?

Спасибо.

EDIT

Больше контекста-

var subdivs2 = [];
var subdivs2 = angular.element(document.querySelector('[ng- 
controller="mainCtrl"]')).scope().subdivisions2

for(var i = 0; i < subdivs2.length; i++) {
  subdivs2[i] = subdivs2[i]["province"];
}

var admin1 = [];
for(var i = 0; i < subdivs2.length; i++) {
  admin1[i] = subdivs2[i][0]["name"];
}

В моем угловом контроллере есть вложенный массив с именем subdivisions2. Я поместил все значения ключа с именем "name" в массив admin1.

admin1 выглядит так:

0: "Adrar"
1: "Algiers"
2: "Annaba"
3: "Aïn Defla"
4: "Aïn Témouchent"
5: "Batna"
6: "Biskra"
7: "Blida"
8: "Bordj Bou Arréridj"
9: "Boumerdès"
10: "Bouïra"
11: "Béchar"
12: "Béjaïa"
13: "Chlef"
14: "Constantine"
15: "Djelfa"
16: "El Bayadh"
17: "El Oued"
18: "El Taref"
19: "Ghardaïa"
20: "Illizi"
21: "Jijel"
22: "Khenchela"
23: "Laghouat"
24: "M'Sila"
25: "Mascara"
26: "Mila"
27: "Mostaganem"
28: "Médéa"
29: "Naâma"
30: "Oran"
31: "Ouargla"
32: "Oum el-Bouaghi"
33: "Relizane"
34: "Saïda"
35: "Sidi Bel Abbès"
36: "Skikda"
37: "Souk Ahras"
38: "Sétif"
39: "Tamanghasset"
40: "Tiaret"
41: "Tindouf"
42: "Tipaza"
43: "Tissemsilt"
44: "Tizi Ouzou"
45: "Tlemcen"
46: "Tébessa"

Интересно, что когда я просматриваю коллекцию HTMLC, в нижней части появляется надпись «длина: 47» (такая же длина, как у admin1). Но когда я ставлю console.log (content.length); это говорит 1. Почему это?

Answer 1

Проблема в том, что у вас есть только один цикл , и этот цикл отлично перебирает элементы HTML, но при прохождении каждого (всего один раз) он добавляет стиль только из текущегоindex index.

Здесь необходимо два цикла: один для прохождения элементов, а другой для прохождения стилей, пока он еще находится на элементе.

Вот пример:

let classes = ["big","bold","blue"];

// First, get all the elements you'll want to work with.
// Don't use .getElementsByClassName! Use .querySelectorAll()
let els = document.querySelectorAll(".special");

// You can use regular counting loops on HTMLCollections, but
// Arrays offer more robust looping without you having to manage 
// indexes. So, we'll convert the collection to an array:
els = Array.prototype.slice.call(els);

// Loop over the elements array
els.forEach(function(el){
   
   // Now, while we are on just one of the elements,
   // start a second loop to go over the string array
   classes.forEach(function(cls){
      // Add the class to the element that we're currently looping over
      el.classList.add(cls);
   });

});

.big { font-size:2em; }
.bold { font-weight:bold; }
.blue { color:blue; }

<div class="special">Some Content</div>
<p>Some Content</p>
<div>Some Content</div>
<p class="special">Some Content</p>
<div class="special">Some Content</div>
<p>Some Content</p>
<div>Some Content</div>
<p>Some Content</p>

ПРИМЕЧАНИЕ: Не использовать .getElementsByClassName()!