Dig down path to JavaScript Objects

Question

I'm trying to extract root path to current element in MultiLevelPushMenu plugin.

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

owner has given Method to extract root level path onto document

/**
 * 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);

I've tried using same as per guidelines but I'm getting HTMLLiobject, but not able to dig down to path.

I need path into string format from this collection, any help?

here is my code..

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

Andre Nel · Accepted Answer · 2017-02-10 07:01:34Z

The following updated example should give you:

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

on click of last element - instead of the string-of-the-object you are currently getting...

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

Thanks, but how to drill down to path of root that's my basic requirement.
path[0] = <div class="levelHolderClass ltr multilevelpushmenu_inactive" data-level="0" style="margin-left: 0px; width: 231px; min-width: 151px;">…</div>
path is an array and sub objects can be pulled from the array
updated answer with path object traversing example... hope this helps :)
Thanks for update, I actually want it like "All Categories\Devices\Mobile Phones\Super Smart Phone"

Collectives™ on Stack Overflow

Dig down path to JavaScript Objects

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related