title: Target an empty <li>
body: <p>I know this one must be a simple one for the jQuery gurus here, but I honestly have no idea how to accomplish it.</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="panel_contents"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to target the empty <code>&lt;li&gt;</code> and attach a class to them, for example <em>class="empty"</em>. I don't want to modify the HTML to manually add the classes for presentational purposes if I don't have to.</p>
  
  <p>I started a <a href="http://jsfiddle.net/3vDv8/1/" rel="nofollow"><strong>JSFIDDLE</strong></a> here for demo purposes.</p>
  
  <p>Thanks a million for any help with this.</p>
  
  <p>--</p>
  
  <p><strong>EDIT 3 [9/16/14]</strong></p>
  
  <p>Today, I admit that maybe using jQuery might not be really necessary since empty elements can be targeted with CSS using the <code>:empty</code> pseudo-selector, which is actually quite well supported across all browsers all the way down to IE8 (albeit partial support) - <a href="http://caniuse.com/#search=empty" rel="nofollow">http://caniuse.com/#search=empty</a></p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Here's <a href="http://jsfiddle.net/UH2uN/3/" rel="nofollow"><strong>Another Solution</strong></a>. </p>
  
  <p>This solution looks for <code>&lt;a href&gt;s</code> inside the <code>&lt;li&gt;</code>, if it has one, it will NOT add the class, if there are no <code>&lt;a href&gt;s</code>, then the class <em>empty</em> is added.</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Thanks to Daniel for the solution. Here's a <a href="http://jsfiddle.net/3vDv8/7/" rel="nofollow"><strong>WORKING DEMO</strong></a></p>