javascript - JQuery事件委托(delegate): how to get the index of a JQuery Object in a Array?

Question

我创建了一个充满 jQuery 对象 - dom 元素的数组:

var tabComponet = new Class({
    var $tab = $("<div class='tab'></div>");
    var $container = $("<div id='container'></div>");

    var tabsArr = [];
    [a, b, c].each(function(){
      tabsArr.push($tab);
      $container.append($tab);
    });

    $container.on('click', '.tab', function (e) {
      e.preventDefault();
      var index = $(tabsArr).indexOf($(this));
  }
});

我创建了 tabsArr 是为了避免上面这个类创建多个组件，届时会有多个组件包含 .tab 类，因此使用 $('.tab') 将无法正常工作，但似乎我不能只需在 tabsArr 上放置一个 $ 符号即可使其工作。同样在代表团中，我也应该避免使用“.tab”作为参数，对吗？

我用谷歌搜索了一下，可能是因为每次我使用 $ 来创建 JQuery 对象时，它们都会不一样，只是包含相同的值，所以 $(this) 不在 tabsArr 中，因为 tabsArr 不包含它，但值相同。

那么我该怎么做呢？我应该如何创建一个包含属于其自己组件的确切选项卡元素的对象？

Answer 1

当您创建元素时，您将获得对此元素的引用。 引用不是值(value)。您的代码是一个很好的示例:当您的 for 循环完成时，无论如何您都只会在容器内看到一个元素..

将 javascript 元素包装到 jQuery 中总是会创建新的引用。当您在 JavaScript 中比较两个元素(以及任何非原始类型)时，您不会比较值(内容)，而是比较它们的引用。幸运的是，您可以使用 get() method获取对元素的 javascript 直接引用!

var $container = $("<div id='container'></div>");

var tabsArr = [];
for (var i=0;i<2;i++) {
  let $tab = $("<div class='tab'></div>");
  tabsArr.push($tab.get(0));
  $container.append($tab);
};

$container.on('click', '.tab', function (e) {
  e.preventDefault();
  console.log(tabsArr.indexOf(this));
});

$container.appendTo('body');

.tab {
  height: 100px;
  width: 200px;
  background-color: red;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>