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

工作例如：

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 2

這是去解決。

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

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