将 JS 对象关联到 HTML ID答案

【问题标题】：Relate JS Objects to HTML ID's将 JS 对象关联到 HTML ID
【发布时间】：2019-04-14 01:18:09
【问题描述】：

有没有一种方法可以创建多个 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>

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/元素

【问题讨论】：

你试过数组吗？
你能进一步解释一下吗？
const arr = { data1: "This goes with the first DIV" }, ... 然后是元素的集合，第0个元素将对应arr[0]

标签： javascript jquery html arrays object

【解决方案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>

【讨论】：

+1 也可以使用Array.from(document.querySelectorAll(...), data1 => ({ data1 })) 以获得更简洁的解决方案
@Phil 真的吗？这是如何运作的？ Array.from有内置映射功能吗？
是的。见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
谢谢！我会将其添加到我的答案中。
@JackBashford 您应该更具体地了解元素。您应该选择.exampleClass。也许还提到第二种方法更慢jsbench.me/62juga1ohs/1

【解决方案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>

【讨论】：