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

parent()をlast( ) にチェーンできます。

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

このソリューションparents()は、外側の要素に最も近いものから順序付けられた祖先要素を返すため、機能します。

元の要素を検索の一部にする (つまり.item-7、それ自体を返す) 場合は、addBack()にチェーンparents()してから、 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 に答える