循环后的jQuery显示每个Div

Question

我尝试学习代码，我必须制作一个天气应用程序。我有一个小问题，当我在接下来的3天内致电OpeWeather API时，我想在每个面板中显示温度，但是我不知道如何正确使用循环。

这是我的代码

function getWeather(query){
  $.ajax({
    url: api + chiaveId + query + giorni,
    dataType: 'jsonp',
    type: 'POST',
    success: function(data) {
      $.each(data.list, function (i) {
        //console.log(data.list[i].humidity+ ":"+i)
        //console.log(data.list[i].temp.day)
        var temp = Math.floor((data.list[i].temp.day - 273.15));
        $.each($(".pannello-temperatura"), function(element){  
          $(this).html(temp);
        }); 
      });       
      $("#pannello-citta").html(data.city.name).slideUp(0).slideDown(900);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      OGGI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
  <div class="col-md-4  col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div> 
  </div>
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOPODOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
</div>

Answer 1

这是要去的解决方案。

    $(".pannello-temperatura").each(function(index,element){  
      $(element).html(temp);
    }); 

Answer 2

我认为，如果一天是data.list的项目，您不需要在divs元素上循环。

使用$.each(data.list)循环索引访问正确的.pannello-temperatura DIV元素。

$.each(data.list, function (i) {
   var temp = Math.floor((data.list[i].temp.day - 273.15));
   $(".pannello-temperatura").eq(i).html(temp);
});

Answer 3

工作示例：

function getWeather(query){
  $.ajax({
    url: api + chiaveId + query + giorni,
    dataType: 'jsonp',
    type: 'POST',
    success: function(data) {
      // Select panels and iterate over each
      $(".pannello-temperatura").each(function (index, element) {
        // Get temperature by index from your data
        var temp = Math.floor((data.list[index].temp.day - 273.15));
        // Use text  instead of html for a third party data for a safety
        $(element).text(temp);
      })      
      $("#pannello-citta").html(data.city.name).slideUp(0).slideDown(900);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      OGGI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
  <div class="col-md-4  col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div> 
  </div>
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOPODOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
</div>