循环后的Jquery在每个div中显示结果答案

【问题标题】：Jquery after loop show result in every div循环后的Jquery在每个div中显示结果
【发布时间】：2017-04-30 01:03:20
【问题描述】：

我尝试学习编码，但我必须制作一个天气应用程序。我有一个小问题，当我在接下来的 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>

【问题讨论】：

那么，您遇到了什么错误？你得到什么结果？您的代码中的哪些地方发生了故障？

标签： javascript jquery html css each

【解决方案1】：

如果一天是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);
});

【讨论】：

【解决方案2】：

工作示例：

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>

【讨论】：

【解决方案3】：

这是解决方案。

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

【讨论】：