在 jQuery 中选择子对象的子对象

Question

我有一个侧面导航，正在导入完整的网站导航，我想将其缩减为仅当前部分的子链接。结构是这样的：

<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>

因此，如果我在 BA 上，我希望在侧面导航中看到 BA、BB 和 BC，但不想看到 MainB 或任何其他链接。我已尝试以下操作，但它返回每个主导航部分（BB、CB 等）的第二个子项：

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

非常感谢任何提示。谢谢。

Answer 1

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

jQuery子选择器是“>”字符。您还可以使用“> *”保存对 .children() 的调用，因为这将获取作为第 n 个 li 的子元素的任何元素。