JQuery afterループごとに結果が表示されます

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