Jquery accessing distanced parents

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.

score 2 · Accepted Answer · answered Aug 30 '11 at 16:12

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

Carlos Eduardo da Fonseca · Answer 2 · 2011-08-30T16:21:13.083

1

Try this:

// Will only affect subcategory links
$('.tabMenu li #sub a').click(function() {
  var parentCategory = $(this).parent().parents('li:first').children('a:first').html()
})
// Will only affect "Games" and "Videos" links
$('.tabMenu > li > a').click(function() {
  var category = $(this).html() 
})

Of course you could use them both in the selector ".tabMenu li #sub a" but I think this way is cleaner.

edited Aug 30 '11 at 16:21

answered Aug 30 '11 at 16:13

Carlos Eduardo da Fonseca

412
2
7

score 0 · Answer 3 · answered Aug 30 '11 at 16:14

0

In first place, you can only have one instance of the same id. (id="sub"). Change that to a class.

Try stopping event bubbling, in other words, make sure the script is only executed once per click.

answered Aug 30 '11 at 16:14

Captian Trips

49
3

Jquery accessing distanced parents

3 Answers3