父选择器Jquery

时间:2013-07-01 18:42:51

标签: javascript jquery

我想在<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');

我不确定为什么我不能抓住属于whoweare的li。

编辑:提供完整的代码部分。只是尝试将一个活动类添加到WHO WE ARE

  • 标记中。

  • 2 个答案:

    答案 0 :(得分:6)

    也许你应该用这个来简化自己:

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

    如果您想在列表中的第一个active上添加课程li,请执行以下操作:

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

    答案 1 :(得分:0)

    您的最外层<li>未包含在<ul>中,因此第一个选择器("ul li ul li a")将找不到任何内容。请改用:

    jQuery('li ul li a')
    

    这将选择您的ul下的3个超级链接,其中包含“下拉菜单”。下一个问题是使用parent方法。当你调用parent('ul li')时,那个选择器会导致jQuery(和我自己)一些混乱。只需在没有任何选择器的情况下调用parent(),因为parent()始终只在DOM树上移动一个级别并停在那里。它会自动选择包含每个<li>的{​​{1}}。

    这应该可以解决问题:

    <a>