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

工作示例：

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>

Answer 3

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

Jquery 循环后每 div 显示一次结果

Jquery after loop show result in every div

html

javascript

css

each

jquery