Question

我怎么从这里走

<div id="cat" class="super"></div>
<div id="cat" class="super"></div>
<div id="bird" class="super"></div>
<div id="dog" class="super"></div>


var allElements = document.getElementsByClassName('super');
for(var i = 0; i < allElements.length; i++) {
    allElements[i].id && console.log(allElements[i].id);
}

正在给我ID的列表：猫狗鸟...

要动态地将个人var分配给类名super中的每个ID，而不是像列表/数组中的编号那样，而是像实例中那样，通过其ID来分配

var new_el_1 = document.getElementById("cat");
var new_el_2 = document.getElementById("dog");
var new_el_3 = document.getElementById("bird");
...

所以我的基本问题是如何从我的观点获得示例结果。

Answer 1

最好将这些值存储在数组中

let new_el = [];

for (let i = 1; i <= numElements; i++) {
  new_el[i] = document.getElementById(`array-element-${i}`);
}

一旦存储，就可以这样访问它们：

new_el[2]  // returns the element #array-element-2

Answer 2

document.querySelectorAll('.super').forEach((div,index) => div.setAttribute('id','array-element-'+index));

<div class="super"></div>
<div class="super"></div>
<div class="super"></div>
<div class="super"></div>
<div class="super"></div>

Answer 3

如果您试图创建可通过DOM中的ID进行访问的变量，请考虑创建一个对象，该对象的属性映射到所需的元素：

var allElements = document.getElementsByClassName('super');
var elementsMap = {};
for(var i = 0; i < allElements.length; i++) {
    var id = allElements[i].id;
    if(allElements[i].id) {
        elementsMap[id] = document.getElementById(id);
        console.log(elementsMap[id]); //access each element by the id
    }
}

Answer 4

我绝对同意MTCoster的回答，您最好将这些元素存储在数组中。这是可怕的代码。但是，这并不能回答您的问题。 window["variable_name"]是您要寻找的。这将创建单个变量。

for (let i = 0; i < allElements.length; i++) {
    window['new_el_' + i] = document.getElementById(allElements[i].id);
}

从ID的JS列表创建var

4 个答案: