javascript - 如何找到不比选择器更深的元素？

Question

我正在构建一个 jQuery 插件来管理表单集合。该插件旨在添加 add、remove、move up 和 move down 按钮来更改该集合。

• 集合的根节点始终包含一个选择器，例如 .collection。

• 只要有 .add 类，按钮就可以是任何东西

我实现了 min 和 max 选项，所以 add 和 remove 按钮相应地消失了。当我尝试管理一组表单集合时，我的问题出现了:如何只选择引用正确集合的 add 按钮？

为了简化问题，请看下面的 HTML 代码:

<div class="collection">
  <div>something</div>
  <div>something</div>
  <div>
    <div class="add">+</div>
  </div>
  <div>something</div>
  <div class="collection">
    <div>something</div>
    <div>something</div>
    <div>
      <div class="add">+</div>
    </div>
    <div>something</div>
  </div>
</div>

请记住，按钮的深度可以是任意的:集合是由用户构建的，我不知道 dom 中的按钮在哪里。顺便说一句，它比 .collection 更深，这就是我所知道的。

如何选择所有 add 按钮 until 第二个 .collection，但不进一步？

对于那些感兴趣的人，这个插件是可用的(但在活跃的开发中)here .

Answer 1

我假设您有对 .collection 对象的引用，您希望在名为 target 的变量中为其找到 add 按钮.如果是这样，您可以这样做:

target.find(".add").filter(function(i, element) {
   return $(element).closest(".collection").get(0) === target.get(0);
});

这会找到给定 .collection 中的所有 .add 按钮，然后删除嵌套 .collection 中包含的所有按钮而不是直接在目标 .collection 中。