for循环在JavaScript中附加3个不同的值

如何将输出设置为：名称：…，说明：…，主温度：。。。而不是：名称：…，名称：…，名称：…，说明…，说明：

for (var i = 0; i < 3; i++) {
  $('#name').append('<b>Name:</b><ul>' + `<li>${name[i]}</li>` + '</ul>');
  $('#main_temp').append('<b>Main Temp: </b><ul>' + `<li>${mainTemp[i]}</li>` + '</ul>');
  $('#weather_description').append('<b>Weather Description:</b><ul>' + `<li>${description[i]}</li>` + '</ul>');
}

---

您可能正在寻找以下内容：

JS

var text=''；
对于（变量i=0；i<3；i++）{
文本=''；
text='
'+
`
名称：${Name[i]}
`+
`
主温度：${mainTemp[i]}
`+
`
天气描述：${Description[i]}
`+
“
”；
$（“#容器”）。追加（文本）；
}

HTML

---

问题是您总是在同一个元素后面追加内容。

您可以使用模板从逻辑中提取html，并更好地定义输出应该存在于其中的分组

var name=['温哥华'，'温哥华'，'温哥华']；
var description=[‘小雨’、‘小雨’、‘小雨’]；
var mainTemp=[289.917286.551285.244]；
var template=document.querySelector（'#outputTemplate'）.innerHTML；
变量$output=$（“#output”）；
对于（变量i=0；i<3；i++）{
设$template=$（模板）；
$template.find（'.name'）.text（名称[i]）；
$template.find（'.description'）.text（description[i]）；
$template.find（'.mainTemp'）.text（mainTemp[i]）；
$output.append（$template）；
}

.group{
边框：1px实心rgb（0,0,0）；
}

名称：

天气描述：

主温度：

在看不到标记的情况下，您要添加两个块的三个块看起来是相互独立的。如果希望它们以任何形式组合在一起，则必须更改正在重复的元素。@user8672473这是什么意思

append（）

可以添加任意数量的标记，只要标记完整。谢谢你，João。这正是我想要的。因此，在for循环中，对我来说，行为是，第一个循环附加到#name、#description和#main#u temp。然后在第二个循环中，将再次附加到#name、#description和#main#u temp。但它是在#名字前加3次，在#描述后加3次……是的，没错。您可以使用一个与类相关的解决方案来解决问题。谢谢Taplar抽出时间。我也会尝试这个解决方案。另一个很棒的方法。

Name:
Vancouver
Name:
Vancouver
Name:
Vancouver
Weather Description:
light rain
Weather Description:
light rain
Weather Description:
clear sky
Main Temp:
289.917
Main Temp:
286.551
Main Temp:
285.244

var text = '';
for (var i = 0; i < 3; i++) {
    text= '';
  text = '<ul>' + 
  `<li><b>Name: </b>${name[i]}</li>` +
  `<li><b>Main Temp: </b>${mainTemp[i]}</li>` +
  `<li><b>Weather Description: </b>${description[i]}</li>` +
  '</ul>';
  $('#container').append(text);
}

<div id="container">
</div>