title: Change JQuery .append output using nth-child if statement
body: <p>I'm listing 6 articles using .append(see below) and want to change which grid size they use depending on which iteration they are in the output. I have set this as var grid = 'x'. I want this to change depending on what child the article is of ul#news. </p>
  
  <p>Using the code below, every article defaults to &lt; li class="sm-12 m-3 cls" ></p>
  
  <p>I believe the principles of what i'm doing to be correct, but something isn't working. Can anyone help?</p>
  
  <p>Many thanks! </p>
  
  <pre><code>for (var i = 0; i &lt; data.response.total; i++) {
      if ('ul#news li:nth-child(0)') {
          var grid = "sm-12";
      } else if ('ul#news li:nth-child(1)') {
          var grid = "sm-12 m-6";
      } else {
          var grid = "sm-12 m-3";
      };
      var thumbnail = data.response.results[i].blocks.main.bodyHtml;
      var title = data.response.results[i].webTitle;
      $('ul#news').append('&lt;li class="' + grid + ' cls"&gt;' + thumbnail + '&lt;h2&gt;' + title + '&lt;/h2&gt;&lt;/li&gt;');
  };
  </code></pre>
  
  <p>Current Output </p>
  
  <pre><code>&lt;ul id="events" &gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I hope to achieve</p>
  
  <pre><code>&lt;ul id="events" &gt;
    &lt;li class="sm-12 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-6 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
    &lt;li class="sm-12 m-3 cls"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>