.addClass（）到$（this）附近但在元素之外的元素

Question

我有这个：

<div class="mycontainer active">
    <a href="#" class="mylink">link</a>
</div>

<div class="mycontainer">
    <a href="#" class="mylink">link</a>
</div>

当我单击其中的链接时，我想将活动类“移动”到第二个容器。

我尝试使用以下jQuery：

$('.mycontainer .mylink').on('click', function(){
    $(".active").removeClass('active');
    $(this).parent().find(".mycontainer").addClass('active');
});

但这是行不通的，实际上我对Javascript / jQuery不太了解，我在做什么错？ 感谢您提供任何帮助。

Answer 1

您可以改用：

$('.mycontainer .mylink').on('click', function () {
    $(this).closest('.mycontainer').addClass('active').siblings('.mycontainer.active').removeClass('active');
});

Answer 2

尝试：

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

要么：

 $(this).parent(".mycontainer").addClass('active');

代替。 因为$(this).parent()已经引用了您要查找的元素，然后使用find()尝试在其中使用类mycontainer元素将无法正常工作。

Answer 3

该行：

$(this).parent().find(".mycontainer")

正在找到mycontainer div，然后在实际上已经存在的情况下在其中查找.mycontainer。

尝试以下方法：

$('.mycontainer .mylink').on('click', function(){
    $(".active").removeClass('active');
    $(this).parent().addClass('active');
});

Answer 4

您要在正在单击的链接上添加活动类...

示例： http ： //jsfiddle.net/LCaNP/

$('.mycontainer .mylink').on('click', function(){
    $('.mycontainer').removeClass('active');
    $(this).parent().addClass('active');
});

Answer 5

$('.myContainer').toggleClass('active')

应该这样做。
它将删除存在的类，并添加不存在的类。 签出.toggleclass（）

因此，代码将是-

$('.mycontainer .mylink').on('click', function(){
   $('.myContainer').toggleClass('active');
});

这是一个JSFiddle