Selecting children of a child in jQuery

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 BA, I want to see BA, BB and BC 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 (BB, CB, 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.