Question

Consider the following HTML structure for drop-down menu:

<ul class="tabMenu">
    <li><a href="#">Games</a>
     <div id="sub">
        <ul>
          <li><a href="#">Main</a></li>                         
          <li><a href="#">3D</a></li>
       </ul>
     </div>
    </li>
    <li><a href="#">Videos</a>
         <div id="sub">
            <ul>
              <li><a href="#">Main</a></li>                         
              <li><a href="#">3D</a></li>
           </ul>
        </div>
    </li>
</ul>

Under this menu I write some string using Jquery(Home is the default value) which tells the user where he is:

<div class="Pointer"><a href="#">Home</a></div>

The following Jquery is used for detecting which category/subcategory is trigerred:

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();
            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            $('.Pointer a').html(linkText);
        });

The Jquery function should return string which looks like Videos->Main if the user clicks subcategory ‘Main’ from the drop-down on ‘Videos’ and Games->Main if the user chooses Main from Games. This code gives only Main no matter if it was clicked from ‘Games’ or ‘Videos’ Any help will be greatly appreciated.

Answer 1

You can use jQuery closest which get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

Working demo

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();

            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            linkText = currentLink.closest('div').closest("li").children("a").text() + " > " + linkText ;
            $('.Pointer a').html(linkText);
        });