父/兄弟/子上的jQuery removeClass

Question

我使用以下jQuery来更改无序列表中的元素类.它似乎不是实现这种效果的最有效方式.有没有更好的方法来写这个？

$(function() {
    $('nav li a').click( function() {
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });
});

谢谢

小号

Answer 1

在这些情况下,通常更简单的方法是将处理程序附加到<li>并使点击从中向上冒泡<a>(默认情况下会发生).然后您的处理程序如下所示:

$(function() {
  $('nav li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

然后在您的CSS中,您只需考虑active进入<li>,如下所示:

li.active a { color: red; }

顺便说一句,如果你有许多<li>元素,你会想要这样使用.delegate():

$('nav').delegate('li', 'click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

Answer 2

另请注意,如果您想'active'从所有元素中删除除此之外this您可以使用简单的东西

$('.active').removeClass('active');
$(this).addClass('active');

这应该很容易在树上传播.但是,如果DOM人口密集,我可以看到它导致性能问题.