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

Question

如何将输出指定为：名称：...，描述：...，主温度：... 而不是：名称：...，名称：...，名称：...，描述.. 。， 描述：..

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>');
}

输出：

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

标签： javascriptjqueryloopsappend

Answer 1

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

var names = [ 'Vancouver', 'Vancouver', 'Vancouver' ];
var description = [ 'light rain', 'light rain', 'light rain' ];
var mainTemp = [ 289.917, 286.551, 285.244 ];
var template = document.querySelector('#outputTemplate').innerHTML;
var $output = $('#output');

for (var i = 0; i < 3; i++) {
  let $template = $(template);
  
  $template.find('.name').text(names[i]);
  $template.find('.description').text(description[i]);
  $template.find('.mainTemp').text(mainTemp[i]);
  
  $output.append($template);
}

.group {
  border: 1px solid rgb(0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">
</div>

<script type="text/html" id="outputTemplate">
  <div class="group">
    <label>
      <b>Name:</b><ul><li class="name"></li></ul>
    </label>
    <label>
      <b>Weather Description:</b><ul><li class="description"></li></ul>
    </label>
    <label>
      <b>Main Temp:</b><ul><li class="mainTemp"></li></ul>
    </label>
  </div>
</script>