jQuery: Get first element of type in top UL in a nested list
<p>I have a nested list like this:</p>

<pre><code>&lt;ul class="list"&gt;

    &lt;li class="list_item_type_1"&gt;
        &lt;ul class="list"&gt;
            &lt;li class="list_item_type_2"&gt;Unnested item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li class="list_item_type_2"&gt;Unnested item&lt;/li&gt;

&lt;/ul&gt;
</code></pre>

<p>With jQuery I want to add a list item before all <code>.list_item_type_2</code> in the first <code>.list</code>. </p>

<p>I write it like this:</p>

<pre><code>$('.list:first').find('li.list_item_type_2:first').before('&lt;li class="list_item_type_1"&gt;Nested list (...)&lt;/li&gt;');
</code></pre>

<p>This won't work as intended because the script finds the first <code>.list_item_type_2</code> in the <strong>second</strong> <code>.list</code> and appends the new code there instead.</p>

<p>How can I keep the search in the first <code>ul</code> and prevent it from entering underlying <code>ul</code> elements?</p>

<p>Cheers!</p>
