title: jQuery: Select all elements that are not descendant of a certain class
body: <pre><code>&lt;div class="container" id = "0" &gt;
     &lt;div class="x" id = "1"&gt; 
        &lt;div id = "2"&gt; 
          &lt;p id = "3"&gt;
            &lt;span id = "4" &gt;text&lt;/span&gt; 
          &lt;/p&gt;
        &lt;div&gt;
      &lt;/div&gt;
  
      &lt;div id="5"&gt;
        &lt;div id="6"&gt; 
          &lt;p id="7"&gt;
            &lt;span class="x" id="8" &gt;text&lt;/span&gt; 
            &lt;span id="9"&gt;text&lt;/span&gt; 
          &lt;/p&gt;
        &lt;div&gt;
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Can you help me to select all the elements :</p>
  
  <ul>
  <li>that are descendant of  '.container"'</li>
  <li>not descendant of '.x' </li>
  <li>doesn't have the class '.x' itself. </li>
  </ul>
  
  <hr>
  
  <p>Looking at the HTML above; it should select the elements <strong>5,6,7 and 9</strong></p>
  
  <ul>
  <li>Element 1 has class "X"</li>
  <li>Elements 2 is direct child of an element-with-class"X"(Element 1)</li>
  <li>Elements 3 and 4 are descendants an element-with-class"X"(Element 1)</li>
  </ul>
  
  <p>Element 8 has class "X"</p>
  
  <hr>
  
  <p>I have this selector but it keeps selecting the descendants (deep children) of element with class "X"</p>
  
  <pre><code>var elements = $('.container').find().parents(':not(.X)').andSelf().filter(':not(.X)');
  </code></pre>