jquery - как получить атрибут корня или самый верхний из <li>, если я глубоко вложен в неупорядоченный список

Question

Я хочу вернуться в древовидное меню вложенного неупорядоченного списка к самому верхнему

и извлечь атрибут "p_node", используя функцию переключения jquery. Так, например, когда я нажимаю «Энни», я хочу получить корень li, который в ее случае равен «mCat1», и извлечь значение для «p_node», которое будет использоваться в сценарии. Как я могу сделать это? Спасибо за вашу помощь.

Вот неупорядоченный список:

<ul id="nav>
  <li type="root" p_node="39">Cat 2
     <ul>
        <li><a>sub cat2</a></li>
     </ul>
  </li>
  <li type="root" p_node="40">mCat1
      <ul>
         <li>Subcat A
            <ul>
               <li>Subcat A.1
                  <ul>
                     <li><a>Annie</a></li>
                  </ul>
               </li>
            </ul>
          </li>
        </ul>
   </li>
 </ul>

Вот некоторые из jquery, которые я пробовал. селектор выбирает самый нижний элемент

с тегом привязки:

$('#nav li:not(:has(li))>a').toggle(function() {
                   //show stuff
                   var parentEls = $(this).parents()
                   .map(function () { 
                  if( $(this).attr('type') == 'root')
                  {
                    var node = $(this).attr('p_node');
                    return node;
                  }
            });
           }, function() {
                   //close stuff
});

Answer 1

Попробуйте это:

$(clickReceiver).parents("li:last").attr('p_node')

Answer 2

$('#nav li:not(:has(li))>a').toggle(function() {
    //show stuff
    var parentEls = $(this).closest('li[type=root]').attr('p_node');
}, function() {
    //close stuff
});