jquery - get next level children only
===

for example:

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

    $("#headerWrapper").children("*");

it will get all the children but i need to return just

    <H1>TEST</H1> 
    <div id="paarofileLinks"></div>
without `<ul>` and the remained list

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