使用jQuery过滤：移除特定元素父树外popup元素的active类

你的需求很明确：移除所有同时带有popup和active类的元素的active类，但要保留那些位于#element父级树中的元素（也就是#element的祖先里的popup.active元素）。

原代码的问题 #

你当前的代码：

$(".active.popup").not($("#element").parents()).removeClass("active");

逻辑方向是对的，但$("#element").parents()会返回#element的所有祖先元素（从直接父级一直到<html>），其中大部分元素根本不带有popup和active类。用这个集合去做.not()，虽然最终能得到正确结果，但会做很多无意义的排除操作，效率不高，而且逻辑不够精准。

更优的解决方案 #

我们可以精准筛选出需要保留的元素——也就是#element的祖先中同时带有popup和active类的元素，再从所有popup.active元素中排除它们：

// 先找到#element的祖先里需要保留的popup.active元素
const keepActive = $("#element").parents(".popup.active");
// 移除其他所有popup.active元素的active类
$(".popup.active").not(keepActive).removeClass("active");

另一种写法：用.filter()判断 #

如果你喜欢更直观的逻辑，可以用.filter()逐个检查每个popup.active元素是否是#element的祖先：

$(".popup.active").filter(function() {
  // 若当前元素不是#element的祖先，则返回true（需要移除active）
  return !$("#element").closest(this).length;
}).removeClass("active");

这里$("#element").closest(this)会检查#element是否在当前元素的子树中，如果返回的集合长度为0，说明当前元素不是#element的祖先，就需要移除它的active类。

验证示例 #

针对你给出的HTML结构：

<div>
  <div class="popup active"> <!-- 这个是#element的祖先，会被保留active -->
    <div id="element"></div>
  </div>
  <div class="popup active"> <!-- 不在#element的父级树中，active会被移除 -->
    <div></div>
  </div>
</div>

上面两种方法都会正确保留第一个popup.active的active类，移除第二个的active类。

内容的提问来源于stack exchange，提问作者Grebe.123