循环后的Jquery显示每个div

时间:2016-12-14 16:03:04

标签: javascript jquery html css each

我尝试学习编码,我必须制作天气应用程序。 我有一点问题,当我在接下来的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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

这是解决方案。

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

答案 1 :(得分:1)

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

使用$.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 :(得分:0)

工作示例:

&#13;
&#13;
#include <cuda.h>
#include <cstdio>

template<class T>
struct container{
    container(int size = 1){ cudaMallocManaged(&p,size*sizeof(T));}
    ~container(){cudaFree(p);}
    __device__ __host__ T& operator[](int i){ return p[i];}
    T * p;
};

struct task{
    int* a;
};

__global__ void kernel_gpu(task& t, container<task>& v){ 
    printf(" gpu value task %i, should be 2 \n", *(t.a)); // this work
    task tmp(v[0]); // BUG
    printf(" gpu value task from vector %i, should be 1 \n", *(tmp.a));
}

void kernel_cpu(task& t, container<task>& v){ 
    printf(" cpu value task %i, should be 2 \n", *(t.a)); // this work
    task tmp(v[0]);
    printf(" cpu value task from vector %i, should be 1 \n", *(tmp.a));
}

int main(int argc, const char * argv[]) {
    int* p1; 
    int* p2; 
    cudaMallocManaged(&p1,sizeof(int));
    cudaMallocManaged(&p2,sizeof(int));
    *p1 = 1;
    *p2 = 2;

    task t1,t2;
    t1.a=p1;
    t2.a=p2;

    container<task> c(2);

    c[0] = t1; 
    c[1] = t2; 

    //gpu does not work
    kernel_gpu<<<1,1>>>(c[1],c);
    cudaDeviceSynchronize();

    //cpu should work, no concurent access
    kernel_cpu(c[1],c);

    printf("job done !\n");

    cudaFree(p1);
    cudaFree(p2);

    return 0;
}
&#13;
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);
    }
  });
}
&#13;
&#13;
&#13;