title: Can't access global variable in $.ajax.done()
body: <p>I'm trying to print through innerHTML some data got with the ajax call, but the global array elements it is not accesible in the done() promise.It is indeed undefined.
  Why does that happen?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;script src ="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              var elements = document.getElementsByClassName("wind");
  
              for(i=0;i&lt;elements.length;i=i+1){
  
                  $.ajax({
                      type:"GET",
                      url:"http://api.openweathermap.org/data/2.5/weather?q="+elements[i].innerHTML+"&amp;appid=7876b25bdca1397553df39ef3ea05fd1",
                      dataType: "json"
                  }).done(function(data){
                      elements[i].innerHTML = data.wind.speed; //elements[i] is undefined
                  });
  
                  //elements[i].innerHTML     here elements[i] is OK but I don't have access to "data"
  
              }
  
          });
      &lt;/script&gt;
  
      &lt;div class="wind"&gt;Venice,it&lt;/div&gt;
      &lt;div class="wind"&gt;Rome,it&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>