jQuery descendents of filtered out parents are still in the collection
<p>Goal: <strong>no</strong> red outlines on p tags inside of .third classes.</p>

<p>Self-contained example below, or jsfiddle here: <a href="http://jsfiddle.net/WJVBm/" rel="nofollow">http://jsfiddle.net/WJVBm/</a></p>

<p>Desperately looking forward to awarding a green checkmark... Thanks in advance for any help!</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $(function() {
        var myDivs = $('div');

        var myFilteredDivs = myDivs.filter(function(){
            return $(this).closest('.third').length == 0;
        });

        var myFilteredParagraphs = myFilteredDivs.find('p'); // why does this find paragraphs in divs that have already been filtered out of the collection?

        myDivs.css('border', '1px solid #CCC');
        myFilteredDivs.css('border', '1px solid blue');
        myFilteredParagraphs.css('border', '1px solid red'); // paragraphs inside of divs that should not exist in the collection are still being outlined by a red border

    });
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        div { float: left; padding: 20px; margin: 5px; }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;div class="first"&gt;
        &lt;p&gt;first&lt;/p&gt;
        &lt;div class="second"&gt;
            &lt;p&gt;second&lt;/p&gt;
            &lt;div class="third"&gt;
                &lt;p&gt;third&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="second"&gt;
            &lt;p&gt;second2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="third"&gt;
            &lt;p&gt;third2&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
