Question

有没有一种方法可以创建多个JS对象，每个对象都与具有唯一ID的单独HTML元素相关？还有没有我可以不用ID的方法，例如使用class[1]吗？

我似乎找不到任何答案

HTML

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

JS

var Object1 = {
data1: "This goes with the first DIV"
}
var Object2 = {
data1: "This goes with the second DIV"
}
var Object3 = {
data1: "This goes with the third DIV"
}
var Object4 = {
data1: "This goes with the fourth DIV"
}

我想将每个JS对象关联到其自己的ID /元素

Answer 1

您可以使用querySelectorAll和map和...（展开）来创建对象数组，以从返回的NodeList中创建数组：

const arr = [...document.querySelectorAll("div.exampleClass")].map(d => ({ data1: d }));
console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: auto; }

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

如@Phil in the comments所述，Array.from可以提供映射功能-这样可使代码更简洁：

const arr = Array.from(document.querySelectorAll("div.exampleClass"), div => ({ data1: div }));
console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: auto; }

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

Answer 2

您可以在没有ID的情况下进行操作。 map()进行回调，其第二个参数是元素迭代的当前索引。

let divs = [...document.querySelectorAll('.exampleClass')];

let data = divs.map((x,id) => ({[id]:x}));
console.log(data)

<div class="exampleClass"> </div>
<div class="exampleClass"> </div>
<div class="exampleClass"> </div>
<div class="exampleClass"> </div>

将JS对象与HTML ID相关联

2 个答案: