цикл для добавления 3 различных значений в JavaScript - PullRequest
Новая
       13

цикл для добавления 3 различных значений в JavaScript

0 голосов
/ 05 июля 2018

Как я могу дать вывод как: Имя: ..., Описание: ..., Основная температура: ... Вместо: Имя: ..., Имя: ..., Имя: ..., Описание ..., Описание: .. 

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

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Вы можете использовать шаблон для извлечения 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>
0 голосов
/ 05 июля 2018

Возможно, вы ищете что-то вроде этого:

JS 

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

HTML 

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

Проблема в том, что вы всегда добавляете один и тот же элемент.

...