Parent Selector Jquery

Question

I want to add a class of 'active' to the parent class of an <li>

   <div id="navigation">
            <ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class=" nav nav-pills  nav-edit " id="nav-main-menu"><li class=" nav-link  dropdown "><a href="/whoweare" data-toggle="dropdown" class=" nav-link  dropdown ">WHO WE ARE <b class="caret"></b></a><ul class="dropdown-menu"><li class=" nav-link  active "><a href="/mission" data-toggle="" class=" nav-link  active ">Mission </a></li><li><a href="/history" data-toggle="" class=" nav-link ">History </a></li><li><a href="/executiveteam" data-toggle="" class=" nav-link ">Executive Team </a></li></ul></li><li class=" nav-link  dropdown "><a href="/greatopportunity" data-toggle="dropdown" class=" nav-link  dropdown ">A GREAT BUSINESS OPPORTUNITY <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/demand" data-toggle="" class=" nav-link ">Demand </a></li><li><a href="/growth" data-toggle="" class=" nav-link ">Growth </a></li><li><a href="/opportunity" data-toggle="" class=" nav-link ">United State Opportunity </a></li><li><a href="/canada_opportunity" data-toggle="" class=" nav-link ">Canada Opportunity </a></li></ul></li><li class=" nav-link  dropdown "><a href="/franchiseeadvantage" data-toggle="dropdown" class=" nav-link  dropdown ">THE FRANCHISEE ADVANTAGE <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/strategy" data-toggle="" class=" nav-link ">Strategy and Tactics </a></li><li><a href="/performance" data-toggle="" class=" nav-link ">Performance Enhancement </a></li><li><a href="/businesstools" data-toggle="" class=" nav-link ">Business Tools </a></li></ul></li><li class=" nav-link  dropdown "><a href="/method" data-toggle="dropdown" class=" nav-link  dropdown ">THE MATHNASIUM METHOD <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/howitworks" data-toggle="" class=" nav-link ">How It Works </a></li></ul></li><li class=" nav-link  dropdown "><a href="/investment" data-toggle="dropdown" class=" nav-link  dropdown ">INVESTMENT <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/unitedstates" data-toggle="" class=" nav-link ">United States / Canada </a></li><li><a href="/international" data-toggle="" class=" nav-link ">International </a></li></ul></li><li class=" nav-link  dropdown "><a href="/meet" data-toggle="dropdown" class=" nav-link  dropdown ">MEET OUR FRANCHISEES <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/testimonials" data-toggle="" class=" nav-link ">Video Testimonials </a></li><li><a href="/writtentestimonials" data-toggle="" class=" nav-link ">Written Testimonials </a></li></ul></li><li><a href="/steps" data-toggle="" class=" nav-link ">STEPS TO OWNERSHIP </a></li><li><a href="/news" data-toggle="" class=" nav-link ">NEWS / PRESS </a></li><li class=" nav-link  dropdown "><a href="/QandA" data-toggle="dropdown" class=" nav-link  dropdown ">Q&amp;A <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="/QandA_US-Canada" data-toggle="" class=" nav-link ">United States / Canada </a></li><li><a href="/QandA_international" data-toggle="" class=" nav-link ">International </a></li></ul></li></ul>
            <div id="consumerSite"><br><div style="margin-left:22px">
  <img src="../upload/1/img/cosumerArrow.gif" width="5" height="9" style="margin-right:4px;"><a href="mailto:?subject=A franchising opportunity referral&amp;body=I thought you might be interested in this Mathnasium Learning Center franchising opportunity. To learn more, visit www.mathnasium.com/franchising">Tell a Friend</a><img src="upload/1/img/tellafriend.jpg" width="20" height="11" class="tellafriend"><br><br>



<img src="../upload/1/img/cosumerArrow.gif" width="5" height="9" style="margin-right:4px;"><a href="http://www.mathnasium.com/" target="_blank">Visit our consumer site at<br>
&nbsp;&nbsp;&nbsp;www.mathnasium.com</a>
<br>
</div>
</div>
            </div>

Javascript:

jQuery('ul li ul li a').parent('ul li').addClass('active');

I'm not sure as to why I can't grab the li that belongs to whoweare.

EDIT: Provided complete section of code. Just trying to add a active class onto the WHO WE ARE

tag.

Upvotes: 1

Views: 160

Answer 1

Maybe you should simplify yourself with this:

$('ul li').on('click', 'a', function() {
    $(this).parent().addClass('active');
});

---

If you want to add the class active on your first li in the list, do this:

$(document).ready(function() {
    $('ul li').first().addClass('active');

    // or select the li with an "a" in it
    $('ul li a').first().parent().addClass('active');
});

Answer 2

Your outermost <li> is not enclosed in a <ul>, so the first selector ("ul li ul li a") won't find anything. Use this instead:

jQuery('li ul li a')

This selects your 3 hyperlinks under your ul with class "dropdown-menu". The next problem is with the parent method. When you call parent('ul li'), that selector is causing jQuery (and myself) some confusion. Simply call parent() without any selector, because parent() always moves only one level up the DOM tree and stops there. It will automatically select the <li> that encloses each <a>.

This should do the trick:

jQuery('li ul li a').parent().addClass('active')