title: Add class to <li> element based on container div width
body: <p>I have a floated list of images each with a right margin of 10px. I am using jquery to give the last LI element a class of "last" which removes the right margin.</p>
  
  <p>Here's the jQuery I'm using:</p>
  
  <pre><code>$('ul.grid_list li:nth-child(3n)').addClass('last');
  </code></pre>
  
  <p>So this one makes it so that each row has 3 LI elements.</p>
  
  <p>What I need to do is have the "last" class to be attached to a different LI element based on how big the container div is. </p>
  
  <p>I use media queries to increase the container div width and it's broken down into 4: 
  Mobile (2 LI per row),
  Facebook iFrame 520px (3 LI per row),
  iPad Portrait (4 LI per row),
  960px (5 LI per row)</p>
  
  <p>So basically what it needs to do is something like this....</p>
  
  <p>If  is 960px wide, add "last" to 5th Li child
  If  is 520px wide, add "last" to 3rd LI child</p>
  
  <p>I hope that all makes sense. Let me know if you need more detailed info. I am open to adding a different class name to the container div based on window size.</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT:</p>
  
  <p>Sorry, in response to one question, the html is set up something like this:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  ...
      &lt;ul class="grid_list"&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>With WRAPPER being the container element that gets the size attached to it.</p>