jquery - How do I get the attribute of the root, or top most < li > if I'm nested deeply down in an unordered list...

Question

I want walk back up the tree menu of a nested unordered list to the top most < li > and retrieve the "p_node" attribute using the toggle function of jquery. So, for example, when I click on "Annie" I want to retrieve the root li, which in her case is "mCat1" and extract the value for "p_node" to be used in the script. How can I accomplish this? Thanks for your help.

Here's the unordered list:

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

Here's some of the jquery I've been trying. the selector is selecting the bottom most < li > that has an anchor tag:

$('#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

Try this:

$(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
});