javascript - jQuery 更新父项上的类

Question

我有以下布局:

<ul id="header">
     <li id="item1" class="off">   <a>Abc</a>   </li>
     <li id="item2" class="off">   <a>Abc</a>   </li>
</ul>

当我单击 <a> 中的 href 时我想要<li>中的类(class)以便更新。

我尝试了以下方法，但没有成功:

$(".header > li a").click(function(){

      $(".header li a.current").removeClass("off");
        $(this).addClass("on");

});

有什么想法吗？

--编辑:好吧，我刚刚意识到我没有正确地看待这个问题。

因此，当单击该链接时，会加载一个新页面。因此，使用单击功能是错误的，因为会加载新页面，因此对我的类所做的任何更改都将丢失。因此，我需要的是使用 $(document).ready(function()说“我点击了上一页中带有 id 的 li，所以现在更新该类”

所以

谢谢!

Answer 1

您可以使用closest()获取父级 li 然后添加类:

$(this).closest("li").addClass("on");

您还需要使用 id 选择器 $("#header") 而不是类选择器 $(".header"):

$("#header > li a").click(function(){

      $("#header li a.current").removeClass("off");
        $(this).closest("li").addClass("on");

});

FIDDLE DEMO