Question

I have a side nav that is importing the complete site nav and I’d like to cut it down to only child links of the current section. Structure is this:

<div class="sidebarLinks">
<ul>
    <li> <!-- MAIN NAV SECTION -->
        <a href="#" id="MainA">MainA</a>
    </li>
    <li> <!-- MAIN NAV SECTION -->
        <a href="#" id="MainB">MainB</a>
        <ul>
            <li><a href="#" id="B-A">B-A</a></li>
            <li><a href="#" id="B-B">B-B</a></li>
            <li><a href="#" id="B-C">B-C</a></li>
        </ul>
    <li>
    <li> <!-- MAIN NAV SECTION -->
        <a href="#" id="MainC">MainC</a>
        <ul>
            <li><a href="#" id="C-A">C-A</a></li>
            <li><a href="#" id="C-B">C-B</a></li>
            <li><a href="#" id="C-C">C-C</a></li>
        </ul>
    <li>
</ul>
</div>

So if I’m on B-A, I want to see B-A, B-B and B-C in the side nav, but not MainB or any other links. I’ve tried the following, but it returns the second child of every main nav section (B-B, C-B, etc.):

$(".sidebarLinks ul li:nth-child(2)").children().show();

Any tips are much appreciated. Thanks.

Answer 1

$(".sidebarLinks > ul > li:nth-child(2) > *").show();

The jQuery child selector is the “>” character. You can also save the call to .children() with “> *” as that will get any element that is a child of the nth li.