向下挖掘JavaScript对象的路径

Question

我试图在MultiLevelPushMenu插件中提取当前元素的根路径。

https://github.com/adgsm/multi-level-push-menu

老板给的方法来提取根级别路径到文件

/** 
* Find path to root of selected menu level object 
* Provides chain collection of menu level objects (root menu level object to given menu level object), or false in case of error 
*/ 
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject); 

我已经尝试使用相同的准则每可是我越来越HTMLLiobject，但不能往下挖路径。

我需要路径转换为字符串格式从这个集合，任何帮助？

这里是我的代码..

$(document).ready(function(){ 
// HTML markup implementation, overlap mode 
$('#menu').multilevelpushmenu({ 
containersToPush: [$('#pushobj')], 
menuWidth: '25%', 
menuHeight: '100%', 
onItemClick: function() { 
// First argument is original event object 
var event = arguments[0], 
// Second argument is menu level object containing clicked item (

element) 
$menuLevelHolder = arguments[1], 
// Third argument is clicked item (
element) 
$item = arguments[2], 
// Fourth argument is instance settings/options object 
options = arguments[3]; 
    // You can do some cool stuff here before 
    // redirecting to href location 
    // like logging the event or even 
    // adding some parameters to href, etc... 
    var path = $('#menu').multilevelpushmenu('pathtoroot', $item); 

    alert(path); 
} 
}); 
}); 

here is what I'm getting

Answer 1

下更新的例子应该给你：

/All Categories/Devices/Mobile Phones/Super Smart Phone 

的最后一个元素的点击 - 而不是字符串，OF-你目前得到的对象...

$(document).ready(function(){ 
 
    // HTML markup implementation, overlap mode 
 
    $('#menu').multilevelpushmenu({ 
 
    containersToPush: [$('#pushobj')], 
 
    menuWidth: '25%', 
 
    menuHeight: '100%', 
 
    onItemClick: function() { 
 
     // First argument is original event object 
 
     var event = arguments[0], 
 
     // Second argument is menu level object containing clicked item (element) 
 
     $menuLevelHolder = arguments[1], 
 
     // Third argument is clicked item (element) 
 
     $item = arguments[2], 
 
     // Fourth argument is instance settings/options object 
 
     options = arguments[3]; 
 
     // You can do some cool stuff here before 
 
     // redirecting to href location 
 
     // like logging the event or even 
 
     // adding some parameters to href, etc... 
 
     var path = $('#menu').multilevelpushmenu('pathtoroot', $item); 
 

 
     //console.log(path); 
 
     //console.log('element0: ', path[0]); 
 
     //console.log('element1: ', path[1]); 
 
     //console.log('----------------------------------'); 
 
     //console.log('element0 inner html: ', $(path[0]).html()); 
 

 
     var s = ''; // string to hold path 
 

 
     for(var i = 0, length = path.length; i < length; i++) 
 
     { 
 
      var html = $(path[i]).find('h2').html(); 
 
      if(html) s += '/' + html.split('</i>')[1]; 
 
     } 
 
     s += '/' + $item.find('a').text(); 
 
     console.log(s); 
 

 
    } 
 
    }); 
 
});

<link href="http://multi-level-push-menu.make.rs/demo/jquery.multilevelpushmenu.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://multi-level-push-menu.make.rs/demo/jquery.multilevelpushmenu.min.js"></script> 
 

 
<div id="menu"> 
 
    <nav> 
 
    <h2><i class="fa fa-reorder"></i>All Categories</h2> 
 
    <ul> 
 
     <li> 
 
      <a href="#"><i class="fa fa-laptop"></i>Devices</a> 
 
      <h2><i class="fa fa-laptop"></i>Devices</h2> 
 
      <ul> 
 
       <li> 
 
        <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a> 
 
        <h2><i class="fa fa-phone"></i>Mobile Phones</h2> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Super Smart Phone</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Thin Magic Mobile</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Performance Crusher</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Futuristic Experience</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"><i class="fa fa-desktop"></i>Televisions</a> 
 
        <h2><i class="fa fa-desktop"></i>Televisions</h2> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Flat Super Screen</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Gigantic LED</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Power Eater</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">3D Experience</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Classic Comfort</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a> 
 
        <h2><i class="fa fa-camera-retro"></i>Cameras</h2> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Smart Shot</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Power Shooter</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Easy Photo Maker</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Super Pixel</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#"><i class="fa fa-book"></i>Magazines</a> 
 
      <h2><i class="fa fa-book"></i>Magazines</h2> 
 
      <ul> 
 
       <li> 
 
        <a href="#">National Geographics</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">The Spectator</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Rambler</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Physics World</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">The New Scientist</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#"><i class="fa fa-shopping-cart"></i>Store</a> 
 
      <h2><i class="fa fa-shopping-cart"></i>Store</h2> 
 
      <ul> 
 
       <li> 
 
        <a href="#"><i class="fa fa-tags"></i>Clothes</a> 
 
        <h2><i class="fa fa-tags"></i>Clothes</h2> 
 
        <ul> 
 
         <li> 
 
          <a href="#"><i class="fa fa-female"></i>Women's Clothing</a> 
 
          <h2><i class="fa fa-female"></i>Women's Clothing</h2> 
 
          <ul> 
 
           <li> 
 
            <a href="#">Tops</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Dresses</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Trousers</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Shoes</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Sale</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
         <li> 
 
          <a href="#"><i class="fa fa-male"></i>Men's Clothing</a> 
 
          <h2><i class="fa fa-male"></i>Men's Clothing</h2> 
 
          <ul> 
 
           <li> 
 
            <a href="#">Shirts</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Trousers</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Shoes</a> 
 
           </li> 
 
           <li> 
 
            <a href="#">Sale</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#">Jewelry</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Music</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Grocery</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Collections</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Credits</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>