title: jQuery: UL select parent li who have children only
body: <p>This has been boggling my mind all afternoon, how do I get my jQuery statement below to only select parent <code>&lt;li&gt;</code> who have children? </p>
  
  <p>To put it simply, I need to add a css class to <code>&lt;li&gt;</code> items 6, 4 &amp; 8 because they have children directly below them. My statement goes too deep, it adds the redColor class to li's 7, 10, 9, 11, 12..</p>
  
  <pre><code>$(document).ready(function () {
     $("#test-list li:has(ul)").addClass("redColor");
   });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;ul id="test-list"&gt;
   &lt;li id="listItem_1"&gt; &lt;strong&gt;Item 1&lt;/strong&gt; &lt;/li&gt;
   &lt;li id="listItem_2"&gt; &lt;strong&gt;Item 2&lt;/strong&gt; &lt;/li&gt;
   &lt;li id="listItem_3"&gt; &lt;strong&gt;Item 3&lt;/strong&gt; &lt;/li&gt;
   &lt;li id="listItem_5"&gt; &lt;strong&gt;Item 5&lt;/strong&gt; &lt;/li&gt;
   &lt;li id="listItem_6"&gt; &lt;strong&gt;Item 6&lt;/strong&gt;
      &lt;ul&gt;
          &lt;li id="listItem_4"&gt; &lt;strong&gt;Item 4&lt;/strong&gt;
              &lt;ul&gt;
                  &lt;li id="listItem_7"&gt; &lt;strong&gt;Item 7&lt;/strong&gt; &lt;/li&gt;
                  &lt;li id="listItem_10"&gt; &lt;strong&gt;Item 10&lt;/strong&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li id="listItem_8"&gt; &lt;strong&gt;Item 8&lt;/strong&gt;
      &lt;ul&gt;
          &lt;li id="listItem_9"&gt; &lt;strong&gt;Item 9&lt;/strong&gt; &lt;/li&gt;
          &lt;li id="listItem_11"&gt; &lt;strong&gt;Item 11&lt;/strong&gt; &lt;/li&gt;
          &lt;li id="listItem_12"&gt; &lt;strong&gt;Item 12&lt;/strong&gt; &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>View on jfiddle as well: <a href="http://jsfiddle.net/t6a6G/9/" rel="nofollow">http://jsfiddle.net/t6a6G/9/</a></p>
  
  <p>Thank you in advance!  </p>