jquery - get next level children only
<p>for example:</p>

<pre><code>&lt;div id="headerWrapper"&gt;
                &lt;H1&gt;TEST&lt;/H1&gt;
                &lt;div id="paarofileLinks"&gt;
                    &lt;ul id="primaryNav" role="navigation"&gt;
                        &lt;li id="musicNav" class="navItem"&gt;
                            &lt;a href="/music" class="nav-link"&gt;Music&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li id="listenNav" class="navItem"&gt;
                            &lt;a href="/listen" class="nav-link"&gt;Radio&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li id="eventsNav" class="navItem"&gt;
                            &lt;a href="/events" class="nav-link nna" id="vbulletin_css2"&gt;Events&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li id="chartsNav" class="navItem"&gt;
                            &lt;a href="/charts" class="nav-link"&gt;Charts&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li id="communityNav" class="navItem"&gt;
                            &lt;a href="/community" class="nav-link"&gt;Community&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li id="originalsNav" class="navItem"&gt;
                            &lt;div&gt;
                                &lt;a href="http://originals.last.fm" class="nav-link"&gt;Originals&lt;/a&gt;
                            &lt;/div&gt;

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

<p>if i used this selector</p>

<pre><code>$("#headerWrapper").children("*");
</code></pre>

<p>it will get all the children but i need to return just</p>

<pre><code>&lt;H1&gt;TEST&lt;/H1&gt; 
&lt;div id="paarofileLinks"&gt;&lt;/div&gt;
</code></pre>

<p>without <code>&lt;ul&gt;</code> and the remained list</p>

<p>note: i don't know the structure of the page so i need something to be general and work with all structures </p>
