5

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

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

4

3 回答 3

16

您可以将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()将元素按文档顺序排列(因此顶级元素将是第一个匹配的而不是最后一个)。

于 2013-08-28T14:29:12.630 回答
2

使用parents()last();

 // assuming 'this' is an `li` element:
 var $topLi = $(this).parents('li').last();

请注意,jQuery 会向上遍历 DOM,因此选择器中的最后一个元素将是顶级父元素。

于 2013-08-28T14:29:53.670 回答
0

这会成功的

$('.item-4').parents('li').last();
于 2013-08-28T14:28:55.527 回答