jQuery在父元素/同级元素/子元素中删除类名

Question

我正在使用以下 jQuery 更改无序列表中元素的类。似乎这不是实现效果的最有效方法。是否有更好的编写方式？

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

感谢

S

- simonyoung

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

- Nick Craver

Answer 2

请注意，如果您想从除了this之外的所有元素中删除'active'，则可以使用以下简单代码：

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

这应该很容易地在整个树结构中传播。然而，如果DOM被大量填充，我可以看到它会对性能造成头痛。

- jcolebrand

Answer 3

我使用了上面的代码，它能正常运行。

我正在我的代码中使用它。

enter code here : function addnewStepsUpper(){
jQuery('.hide_upper_clone_class').clone().insertAfter(".upper_clone_class1");
jQuery('.upper_clone_class1').siblings().removeClass('hide_upper_clone_class');

}

感谢Vishal Sanwar。

- vishal

Answer 4

$(this).addClass('active').parent('li').siblings().children().removeClass('active');

- user3302090