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

Question

我正在构建一个 jQuery 插件来管理表单集合。该插件旨在添加添加、删除、向上移动和向下移动 按钮来更改该集合。

集合的根节点总是包含一个selector，例如.collection.
按钮可以是任何东西，只要它有 .add class

我实现了 min 和 max 选项，所以 add 和 remove 按钮相应地消失了。当我尝试管理表单集合的集合时，我的问题出现了：如何 select 仅 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 更深，这就是我所知道的。

如何 select 所有 添加 按钮直到第二个 .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 中的所有按钮].

Answer 2

尝试

$(".add").not($(".collection:gt(0) .add"));

注意，

利用 jQuery .not() 的 .not( selector ) ，其中 selector 是选择器字符串

.not( selector ) version added: 1.0

selector Type: Selector or Element or Array A string containing a selector expression, a DOM element, or an array of elements to match against the set.

$(".add").not(".collection:gt(0) .add") http://jsfiddle.net/47wc5L96/21/

是否不出现 return 与 .not( selection ) 相同的结果，其中 selection 是 jQuery object

.not( selection ) version added: 1.4

selection Type: jQuery An existing jQuery object to match the current set of elements against.

$(".add").not($(".collection:gt(0) .add")); http://jsfiddle.net/47wc5L96/20/

console.log($(".add").not($(".collection:gt(0) .add")));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<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>

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

How to find elements that are not deeper than a selector?

html

javascript

forms

jquery

formcollection