这个包含大量document.getElementById的JS循环的正确语法是什么

Question

我正在用HTML和JS制作一个锦标赛表。我有几百个"火柴盒"，我想给它们分配一系列不同的数据(如标志/旗帜、球队名称、分数等(。

我怎么能写一个循环来执行以下潜在的数千行：

document.getElementById("matchBox1_team1").innerHTML = teams[1].name;
document.getElementById("matchBox1_flag1").innerHTML = teams[1].flag;
document.getElementById("matchBox1_team2").innerHTML = teams[2].name;
document.getElementById("matchBox1_flag2").innerHTML = teams[2].flag;
document.getElementById("matchBox2_team1").innerHTML = teams[3].name;
document.getElementById("matchBox2_flag1").innerHTML = teams[3].flag;
document.getElementById("matchBox2_team2").innerHTML = teams[4].name;
document.getElementById("matchBox2_flag2").innerHTML = teams[4].flag;

等等。

类似这样的东西，但我没有正确的语法：

var j=1;
for (i=0;i<1000;i+=2){
document.getElementById("matchBox("j")_team1").innerHTML = teams[i].name;
document.getElementById("matchBox("j")_flag1").innerHTML = teams[i].flag;
document.getElementById("matchBox("j")_team2").innerHTML = teams[i+1].name;
document.getElementById("matchBox("j")_flag2").innerHTML = teams[i+1].flag;
j++}

谢谢！

Answer 1

这实际上取决于您检索数据的方法。如果您使用ajax，那么使用js创建表行，并将这些行附加到表中，这样您只需要获得一个元素。

var matchesTable = document.getElementById('matches');
function addMatch(name,flag){
var row = document.createElement('tr');
var nameColumn = document.createElement('th');
nameColumn.innerText = name;
var flagColumn = document.createElement('th');
flagColumn.innerText = flag;
row.append(nameColumn);
row.append(flagColumn);
matchesTable.append(row);
}

无论在哪里获得数据，只需调用addMatch函数，将所有细节作为参数传递，并为所有这些细节创建th元素，然后追加到该表中。

否则，您将需要数千个已经创建的行来获取它们，然后添加这些详细信息。

Answer 2

将id属性与序列号一起使用是一种代码气味：这是一种糟糕的做法。相反，您应该使用这样的类：它们的序列遵循DOM中的自然顺序。

例如：

let teams = [
{ name: "New York Knicks", flag: "flagged" },
{ name: "Toronto Raptors", flag: "cleared" },
{ name: "Sacramento Kings", flag: "cleared" },
{ name: "Miami Hear", flag: "pending" }
];
let teamElems = document.querySelectorAll(".matchBox .team");
let flagElems = document.querySelectorAll(".matchBox .flag");
teams.forEach(({name, flag}, i) => { 
teamElems[i].textContent = name;
flagElems[i].textContent = flag;
});

.matchBox { border: 1px solid }

<div class="matchBox">
<div class="team"></div>
<div class="flag"></div>
</div>
<div class="matchBox">
<div class="team"></div>
<div class="flag"></div>
</div>
<div class="matchBox">
<div class="team"></div>
<div class="flag"></div>
</div>
<div class="matchBox">
<div class="team"></div>
<div class="flag"></div>
</div>

Answer 3

您应该在创建的for循环中使用appendChild方法。还有一个提示是，您必须创建要插入到for循环中的元素(createElement(，并将其插入到使用appendChild创建的表中。你可以参考w3cschool 上的语法