title: JQuery - Select all but last list (from multiple lists.)
body: <p>I'm wondering if this is the most elegant and efficient way of doing this?  </p>
  
  <p>I have multiple 'tag' lists, and through CSS, I want the tags to appear inline (display: inline) and be comma-separated.  The challenge that I'm having is to append commas to all but the last list item in each ul.tagList:</p>
  
  <pre><code> &lt;ul class="outerList"&gt;
      &lt;li&gt;
          &lt;div class="innerContainer"&gt;
              &lt;ul class="tagList"&gt;
                  &lt;li&gt;Tag A&lt;/li&gt;
                  &lt;li&gt;Tag B&lt;/li&gt;
                  &lt;li&gt;Tag C&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="innerContainer"&gt;
              &lt;ul class="tagList"&gt;
                  &lt;li&gt;Tag D&lt;/li&gt;
                  &lt;li&gt;Tag E&lt;/li&gt;
                  &lt;li&gt;Tag F&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>To append commas on all the ul.tagList list items, but the last, I use:</p>
  
  <pre><code> $('ul.tagList').children(':not(:last-child)').append(',');
  </code></pre>
  
  <p>and this produces:</p>
  
  <blockquote>
    <p>Tag A, Tag B, Tag C</p>
    
    <p>Tag D, Tag E, Tag F</p>
  </blockquote>
  
  <p>Is this the best way of doing this?</p>
  
  <p>Also why does <em>:not(:last-child)</em> work but not <em>:not(:last)</em> in this context?</p>
  
  <p>Thanks very much for your help + explanations.</p>
  
  <p>Prembo.</p>