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

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按钮直到第二个.collection,但不是更进一步？

对于那些有兴趣,这个插件是可用的(但在积极的开发)这里.

Answer 1

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

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

这将查找.add给定的所有按钮,.collection然后删除嵌套中包含的任何按钮,.collection而不是直接在目标中.collection.