0 
content = document.getElementsByClassName('outercontent');

生成目标 div 元素的 HTMLCollection。

我正在尝试将数组admin1中的每个索引处的字符串添加到每个索引处每个 div 的 classList 中。

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

现在当我使用 console.log 时content，我可以看到添加的新类 - 但是它只显示admin1数组中所有 div 的第一个字符串。

我读到您不能在 HTMLCollections 上使用 for 循环，所以我尝试在content此处转换为数组：

var contentarr = [...content];

但是当我 console.log 时contentarr，我看到它的长度只有 1（索引 0）。

（这可能与这些 div 中只有一个最初存在于 html 中的事实有关，直到它乘以 ng-repeat (angularjs)？）

那么如何将 HTMLCollection 转换为数组，然后从admin1数组中添加类？

谢谢你。

编辑

更多上下文-

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"

有趣的是，当我查看 HTMLCollection 时，它在底部显示“长度：47”（与 admin1 的长度相同）。但是当我把 console.log(content.length); 它说 1. 这是为什么？

4

1 回答 1

0

问题是您只有一个循环，并且该循环可以很好地遍历 HTML 元素，但是当它遍历每个（仅一次）时，它只会添加当前循环索引中的样式。

这里需要两个循环，一个遍历元素，另一个遍历样式，同时仍在元素上。

这是一个例子：

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()！

于 2019-04-11T19:19:48.707 回答