CODEWITHSUNDEEP
javascriptjquery
Farok Ojil
Farok Ojil

Reputation: 654

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

Upvotes: 1

Views: 4982

Answers (1)

Christoph
Christoph

Reputation: 51201

Unlike find(), children() only returns the direct children of a given element.

So your query should do exactly what you want and only return the two elements in question. If that's not the case, there is something else going wrong. See the example code snippet using pretty much your exact code, giving the correct result:

$("#headerWrapper").children().each(function(){console.log(this)});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>

Side note: The selector you use is not necessary, because children() and children("*") are semantically equivalent.

Upvotes: 4

Related Questions