javascript - 查找并删除 jQuery 插件实例上闭包内保存的 DOM 元素

Question

简而言之，我有一个 jQuery 插件，它包含一个闭包数组，每个闭包都包含一个数组，该数组包含对插件当前负责的 DOM 元素的引用。截至目前，我正在尝试找到一种方法来从这些闭包中查找和删除对指定元素或元素组的引用。从数组中删除它们似乎并不完全困难，因为 jQuery 和 JavaScript 都提供了实现此目的的方法。但是，我很难找到数组本身中的元素。这是我所拥有的:

function _generate_closures (default_color, inst) {
  var color  = default_color;
  return {
    update : function (style) {
      color = style || default_color;
    },
    apply : function (style) {
      style = style || color;
      for (var i = 0; i < group.length; i++)
        group[i].css('color', style);
    },
    add : function ($elem) {
      group.push($elem);
    },
    remove : function ($elem)  {
      // Search for and delete elements from 'group' array
    },
    unbind_events : function (selector) {
      // unbind using namespaced events
    }
  };
}

我知道我可以使用返回的函数来进行搜索，但这是我似乎无法破解的实际搜索。我也可能从完全错误的 Angular 来处理这个问题，我觉得更有可能是这种情况。

我尝试使用 jQuery 的 $.inArray(element, group) 将当前元素与闭包中的每个元素进行比较，但仍然一无所获。我什至使用了group.indexOf(element)，但仍然无法以编程方式确定某个元素是否与用户指定的元素相同。

Answer 1

JQuery 提供了 .is 函数 ( https://api.jquery.com/is/ ) 来测试元素是否相同。

function _generate_closures (default_color, inst) {
  var group = [];
  var color = default_color;
  return {
    update : function (style) {
      color = (style) ? style : default_color;
    },
    apply : function (style) {
      style = (style) ? style : color;
      for (var i = 0; i < group.length; i++) {
        group[i].css('color', style);
      }
    },
    add : function ($elem) {
      group.push($elem);
      alert('Group length is ' + group.length);
    },
    remove : function ($elem)  {
      for (var i = 0; i < group.length; i++) {
        if (group[i].is($elem)) {
        	group.splice(i,1);
        }
        alert('Group length is ' + group.length);
      }
    },
    unbind_events : function (selector) {
      // unbind using namespaced events
    }
  };
}

var obj = _generate_closures('orange');
var $el= $('li:nth-child(2)');
obj.add($el);
obj.apply();
obj.remove($el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
  <li>line 4</li>
</ul>