Selecting children of a child in jQuery
<p>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:</p>

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

<p>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.):</p>

<pre><code>$(".sidebarLinks ul li:nth-child(2)").children().show();
</code></pre>

<p>Any tips are much appreciated. Thanks.</p>
