循环遍历对象数组并更改同一类的 HTML 元素

Question

有没有一种好方法可以遍历对象数组并将这些属性应用于具有相同类名的多个 html 元素？

我希望我的例子更具体地表明我想要实现的目标。 提前感谢！

var myObject = [{
width: 100,
text: "Hello World",
bgColor: '#f00',
},
{
width: 20,
text: "Hi World",
bgColor: "#0f0",
}
];
const divs = document.getElementsByClassName("one");
console.log(divs);
myObject.forEach(function (arrayItem) {
var x = arrayItem.width;
var y = arrayItem.text;
var z = arrayItem.bgColor;
divs.style.width = x + '%';
divs.innerHTML = y;
divs.style.backgroundColor = z;
});

.contain {
width: 500px;
height: 100px;
background: #666;
padding: 20px;
}
.one {
width: 100%;
height: 50px;
background: #aaa;
display: flex;
align-items: center;
}
.one:first-child {
background: #ddd;
width: 80%;
}
span {
margin: 0 20px;
}

<div class="contain">
<div class="one"><span>Should only read "Hello World", have red background and 100% width.</span></div>
<div class="one"><span>Should only read "Hi World", have green background and 20% width.</span></div>
</div>

Answer 1

您的问题是您只是选择了数组divs而不是正确选择其中嵌套的div元素：divs[0];divs[1]等。

如果div 的数量取决于对象子项，那么更好的方法是使用 JS 生成div，而不是将它们放在 HTML 上：

• .html：

`<div class="contain" />

• .js：

const container = document.getElementsByClassName("contain")[0];
myObject.forEach(function (arrayItem) {
let div = document.createElement('div');
var x = arrayItem.width;
var y = arrayItem.text;
var z = arrayItem.bgColor;
div.style.width = x + '%';
div.innerHTML = y;
div.style.backgroundColor = z;
container.appendChild(div);
});

还使用对象解构添加此代码的更简洁格式：

myObject.forEach(function ({width, text, bgColor}) {
let div = document.createElement('div');
div.style.width = `${width}%`;
div.innerHTML = text;
div.style.backgroundColor = bgColor;
container.appendChild(div);
});

Answer 2

你必须遍历myObject，而且还要将循环的当前索引应用于你的divs元素数组。

var myObject = [{
width: 100,
text: "Hello World",
bgColor: '#f00',
},
{
width: 20,
text: "Hi World",
bgColor: "#0f0",
}
];
const divs = document.getElementsByClassName("one");
myObject.forEach(function (arrayItem, index) {
if (index < divs.length) {
var x = arrayItem.width;
var y = arrayItem.text;
var z = arrayItem.bgColor;
divs[index].style.width = x + '%';
divs[index].innerHTML = y;
divs[index].style.backgroundColor = z;
}
});

.contain {
width: 500px;
height: 100px;
background: #666;
padding: 20px;
}
.one {
width: 100%;
height: 50px;
background: #aaa;
display: flex;
align-items: center;
}
.one:first-child {
background: #ddd;
width: 80%;
}
span {
margin: 0 20px;
}

<div class="contain">
<div class="one"><span>Should only read "Hello World", have red background and 100% width.</span></div>
<div class="one"><span>Should only read "Hi World", have green background and 20% width.</span></div>
</div>

Answer 3

>.getElementsByClassName()在循环中应用时会遇到诸如突变和.length属性等边缘情况的问题。较新的方法要好得多：

const divs = document.querySelectorAll(".one");

将.forEach()方法应用于从上述语句返回的 NodeList，然后使用第二个参数(即 NodeList 的当前索引号(引用对象数组及其属性.forEach()每次迭代。请记住，divs是div 的 NodeList，.forEach()的第一个参数表示 NodeList 的当前div，而不是对象数组中的对象。

divs.forEach((node, index) => {...
...const x = cfg[index].width... /* cfg[index] the object at the 
current index in the array of objects */
...node.style.width = x... //node is the current div

const cfg = [{
width: 100,
text: "Hello World",
bgColor: '#f00',
},
{
width: 20,
text: "Hi World",
bgColor: "#0f0",
}
];
const divs = document.querySelectorAll(".one");
//console.log(divs);
divs.forEach((node, index) => {
const x = cfg[index].width;
const y = cfg[index].text;
const z = cfg[index].bgColor;
node.style.width = x + '%';
node.textContent = y;
node.style.backgroundColor = z;
});

.contain {
width: 500px;
height: 100px;
background: #666;
padding: 20px;
}
.one {
width: 100%;
height: 50px;
background: #aaa;
display: flex;
align-items: center;
}
.one:first-child {
background: #ddd;
width: 80%;
}
span {
margin: 0 20px;
}

<div class="contain">
<div class="one"><span>Should only read "Hello World", have red background and 100% width.</span></div>
<div class="one"><span>Should only read "Hi World", have green background and 20% width.</span></div>
</div>