父级-jQuery

Question

我试图做到这一点，所以当我单击退出按钮时，它会遍历父级并选择包装器类，然后删除并添加一个类。

的HTML

<div class="app-icon-container">
     <div class="app-icon-wrapper active">
          <img class="app-icon" src="http://www.antivirus-blog.com/wp-content/uploads/2014/02/google-chrome-logo.png">
     </div>
     <div class="app-hover-window">
          <div class="exit-btn"></div>
     </div>
</div>

jQuery查询

$('.exit-btn').click(function() {
        $(this).closest('.app-icon-wrapper').removeClass('active').addClass('un-active');
    });

Answer 1

.app-icon-wrapper不是.exit-btn的父.exit-btn ，因此.exit-btn closest()无效，它仅对父级有效。
您可以改为获取容器，然后找到包装器

$('.exit-btn').on('click', function() {
    $(this).closest('.app-icon-container')
           .find('.app-icon-wrapper')
           .removeClass('active')
           .addClass('un-active');
});

或类似的东西（不是动态的）

$('.exit-btn').on('click', function() {
     $(this).parent().prev().removeClass('active').addClass('un-active');
});

Answer 2

如果您的exit-btn与包装程序一起使用，则可以使用

$(this).parents('.app-icon-wrapper').remove......

但是在你的情况下

$(this).parent().find('.app-icon-wrapper').remove....

Answer 3

它将更改为以下代码：

$('.exit-btn').click(function() {
    $(this).parent().closest('.app-icon-wrapper').removeClass('active').addClass('un-active');
});

因为您要引用的元素是当前元素父级的同级。 不是本身。