javascript - 父选择器 Jquery

Question

我想向一个父类添加一个“活动”类<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。

编辑：提供完整的代码部分。只是想在我们是谁

标签。

Answer 1

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

$('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');
});

Answer 2

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

jQuery('li ul li a')

这将选择您的ul“下拉菜单”类下的 3 个超链接。下一个问题是parent方法。当您调用 时parent('ul li')，该选择器会导致 jQuery（和我自己）有些混乱。只需调用parent()没有任何选择器，因为parent()总是只向上移动一层 DOM 树并停在那里。它将自动选择<li>包含每个<a>.

这应该可以解决问题：

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