仅在父 li 上添加 active答案

【问题标题】：Add active on parent li only仅在父 li 上添加 active
【发布时间】：2014-07-11 01:31:04
【问题描述】：

我知道 onlu 基本的 jQuery。我想通过 jQuery 在父 li 上添加活动类。

现场直播-http://www.arif-khan.net/other/active/page1.html 转到那里然后转到支持菜单下的第 2 页 (http://www.arif-khan.net/other/active/page2.html)。您可以看到代码在所有 li 上添加活动类也与父 li（支持）。我需要修改该代码，以便父 li(Support) 将获得活动类而不是父 + 所有子 li。

代码-

 <ol id="menu">
        <li><a href="Default.aspx" title="Home Page" style="color:#FFF">Home</a>        
        <li><a href="OverView.aspx" title="Overview">OverView</a>        
        <!-- sub menu -->
              <ol>     
                <li><a href="Technical-Info.aspx" title="Technical Info">Technical Info</a></li>
                <li><a href="End-Device-Info.aspx" title="End Device Info">End Device Info</a></li>
              </ol>
        </li><!-- end sub menu -->        
        <li><a href="Register.aspx">Register To Service</a></li>
        <li><a href="Rates.aspx">Rates</a></li>              
        <li><a href="#">Support</a>        
              <!-- sub menu -->
              <ol>     
                <li><a href="page2.html" title="Page2">Page2</a></li>
                <li><a href="TOS.aspx" title="TOS">Terms Of Service</a></li>
                <li><a href="Contact_Us.aspx" title="Order the service">Contact Us</a></li>
              </ol>
        </li><!-- end sub menu -->        
        <li><a href="skype:nir2far?call" title="Call us on Skype">Skype</a></li>
    </ol>

jQuery-

<script>
$(document).ready(function(){
$('ol#menu li a').each(function(index, element) {
    var li = $(element).attr('href');
    $(element).parent().removeClass("active");   
   var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    if(filename==li)
    {
            $(element).parents("li").addClass("active");
    }

});
});
</script>

【问题讨论】：

$(element).parents("li").addClass("active");应该是父母而不是父母
已经试过了，它在“Page2”上添加了活动类，而不是在“支持”中。
如果在“支持”li 上添加“active”类，所有的li 内容都会收到红色背景。您应该在锚标签中添加活动类。

标签： javascript jquery css

【解决方案1】：

你必须使用

$(element).parent('li').parents('li').addClass("active");

而不是

$(element).parents("li").addClass("active");

您的锚“page2”位于“li”内，因此这是它的直接父级。您必须访问 'li 的父级。

【讨论】：

【解决方案2】：

parents() 方法选择 DOM 树上的所有匹配父元素。 , 您可以使用parent() 选择直接父元素，使用closest() 选择DOM 树上的第一个匹配父元素。

所以试试

$(element).closest("ol").parent("li").addClass("active");

代替

$(element).parents("li").addClass("active");

【讨论】：

已经试过了，它在不支持的 Page2 上添加了活动类。
它不起作用。 parent() 方法返回直接父级。第一个“li”没有直接的“li”作为父级。 @arifix 请看我的回答。