Question

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

集合的根节点始终包含选择器，例如.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深，这是我所知道的。

如何选择所有添加按钮直到第二个.collection，但不能再进一步？

对于那些感兴趣的人，这个插件是可用的（但在活动开发中）here。

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中。

Answer 2

尝试

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

请注意，

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

.not( selector )版本已添加：1.0

selector类型：选择器或元素或数组包含的字符串   选择器表达式，DOM元素或要匹配的元素数组   反对集合。

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

不似乎返回与.not( selection )相同的结果，其中selection是jQuery对象

.not( selection )版本已添加：1.4

选择类型：jQuery An   现有的jQuery对象，以匹配当前的元素集。

$(".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>

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

2 个答案: