jquery - 使用 jQuery 查找顶级 li

Question

假设我有一个这样的菜单...

<ul class="main_menu">
    <li class="item-1">
        First top level item
        <ul>
            <li class="item-2">Item 2</li>
            <li class="item-3">
                Item 3
                <ul>
                    <li class="item-4">Item 4</li>
                    <li class="item-5">Item 5</li>
                </ul>
            </li>
            <li class="item-6">Item 6</li>
        </ul>
    </li>
    <li class="item-7">
        Second top level item
        <ul>
            <li class="item-8">Item 8</li>
            <li class="item-9">Item 9</li>
            <li class="item-10">Item 10</li>
            <li class="item-11">Item 11</li>
        </ul>
    </li>
</ul>

...在这种情况下，子菜单可以处于可变深度，如果我只知道一个子项目，我如何获得顶级项目？例如，我知道类 item-5，那么我想要获取类“item-1”，或者如果我知道“item-11”，我想要“item-7”。

也就是说，无论我在哪里，我都想要“顶级项目 X”。

Answer 1

您可以链接parents()进入last() :

var topListItem = $(".item-5").parents("li").last();

此解决方案之所以有效，是因为 parents() 返回从最接近的到最外层元素排序的祖先元素。

如果您希望原始元素成为搜索的一部分(即 .item-7 返回自身)，那么您可以将 parents() 链接到 addBack() ，然后进入first() :

var topListItem = $(".item-7").parents("li").addBack().first();  // '.item-7'

addBack() 将原始元素添加回父元素链中。在这种情况下，我们必须应用 first() 而不是 last() 因为 addBack() 按文档顺序放置元素(因此顶级元素将是第一个匹配的元素，而不是最后一个)。