parent - Find top level li with jQuery -

let's have menu this...

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

...and in case sub menus can @ variable depth, how can top level item if know sub item? example, know class item-5, want class "item-1", or if know "item-11", want "item-7".

that is, wherever am, want "top level item x".

you can chain parents() last():

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

this solution works because parents() returns ancestor elements ordered closest outer ones.

if want original element part of search (i.e. .item-7 returning itself), can chain parents() addback(), first():

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

addback() adds original element chain of parents. in case, have apply first() instead of last() because addback() puts elements in document order (so top-level element first 1 matched instead of last).