Selecting first instance of class but not nested instances via jQuery
<p>Given the following hypothetical markup:</p>

<pre><code>&lt;ul class="monkey"&gt;
    &lt;li&gt;
        &lt;p class="horse"&gt;&lt;/p&gt;
        &lt;p class="cow"&gt;&lt;/p&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;dl class="monkey"&gt;
    &lt;dt class="horse"&gt;&lt;/dt&gt;
    &lt;dd class="cow"&gt;
        &lt;dl&gt;
            &lt;dt&gt;&lt;/dt&gt;
            &lt;dd&gt;&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl class="monkey"&gt;
            &lt;dt class="horse"&gt;&lt;/dt&gt;
            &lt;dd class="cow"&gt;&lt;/dd&gt;
        &lt;/dl&gt;
    &lt;/dd&gt;
&lt;/dl&gt;
</code></pre>

<p>I want to be able to grab the 'first level' of horse and cow classes within each monkey class. But I don't want the NESTED horse and cow classes.</p>

<p>I started with .children, but that won't work with the UL example as they aren't direct children of .monkey.</p>

<p>I can use find: $('.monkey').find('.horse, .cow') but that returns all instances, including the nested ones.</p>

<p>I can filter the find: $('.monkey').find('.horse, .cow').not('.cow .horse, .cow .cow') but that prevents me from selecting nested instances on a second function call.</p>

<p>So...I guess what I'm looking for is 'find first "level" of this descendant'.
I could likely do this with some looping logic, but was wondering if there is a selector and/or some combo of selectors that would achieve that logic. </p>

<p>UPDATE:</p>

<p>Here's what I ended up with:</p>

<pre><code>$('.monkey')
    .children('.cow')
        ...do something...
    .end()
    .children('li')
        .children('.cow')
            ...do something...
        .end()
    .end()
</code></pre>

<p>Seems verbose/hacky but seems to work. </p>
