title: $.each, for loop won't iterate over HTML elements one by one
body: <p>Building a simple weather app, I got it working with some sloppy vanilla JS. It's clearly something that should be written in jQuery. Converting it over, I've run into some trouble with the 4 day forecast section of the page. In pure JS, I just targeted ID's and fed in the values from the JSON object. Using jQuery, I'm trying to use $.each to iterate over what are now a series of classes, and inject the same values. </p>
  
  <p>I always end up getting the same series of values across the elements, which doesn't make any sense to me. When I log the values to the console, they appear to be iterating correctly. The forecast for each day shows up in the console, and in order. They are not showing up in the elements they are supposed to, even though the script appears to be iterating over the elements, but something is going wrong.</p>
  
  <p>In the pen you can find a couple other things I've tried, including constructing the HTML elements in the loop.</p>
  
  <pre><code>$(document).ready(function(){
    var url="http://api.wunderground.";
    $.getJSON(url,function(response){
      var current = response.current_observation;
      var forecast = response.forecast.simpleforecast;
      $("#city").html(current.display_location.city + ",");
      $("#state").html(current.display_location.state);
      $("#weather").html(current.weather);
      $("#temp").html(current.feelslike_f + "\u00B0");
      $("#lastUpdate").html(current.observation_time);
  
      $.each(forecast.forecastday, function(i){
        var foreshort = forecast.forecastday[i];
        $(".dayName:nth-of-type(" + i + "n)").text(foreshort.date.weekday);
        $(".cond:nth-of-type(" + i + "n)").text(foreshort.conditions);
        $(".hi:nth-of-type(" + i + "n)").text(foreshort.high.fahrenheit);
        $(".lo:nth-of-type(" + i + "n)").text(foreshort.low.fahrenheit);
  
        console.log(foreshort.date.weekday);
        console.log(foreshort.conditions);
        console.log(foreshort.high.fahrenheit);
        console.log(foreshort.low.fahrenheit);
        console.log(i);
      });  //end .each
    }); //end getJSON
  }); //end ready
  </code></pre>
  
  <p>Here's the pen:
  <a href="http://codepen.io/marcussacco/pen/azQLxy" rel="nofollow">http://codepen.io/marcussacco/pen/azQLxy</a></p>