如何查找不深于选择器的元素？

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更深，这就是我所知道的全部。

如何选择所有添加按钮，直到第二个.collection，但不再往下？

对于那些有兴趣的人，这个插件可用（但仍在积极开发中），在这里。

- Alain Tiemblo

---

选择所有的 .add，选择所有的 .collection .collection .collection .add，移除交集。 - Paul S.

如何选择所有的“添加”按钮，直到第二个“.collection”，但不再往后？在 html 中，这是否是一个 .add 元素？ - guest271314

@PaulS。可以有任意数量的封装集合的集合（即使创建集合的集合的集合可能非常奇怪，但仍然是可能的，以我个人看来）。 - Alain Tiemblo

@guest271314，有时候放置两个添加按钮（例如一个在左侧，一个在右侧）是很有用的。 - Alain Tiemblo

Answer 1

假设您已经在一个名为target的变量中引用了想要查找“添加”按钮的.collection对象，那么您可以像这样进行操作：

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

这段代码找到给定集合中所有的.add按钮，然后删除任何一个包含在嵌套的.collection中而不是直接在目标.collection中的按钮。

- jfriend00

---

我没有注意到.closest()仅使用祖先元素。非常有趣。谢谢。 - Alain Tiemblo

@AlainTiemblo - 我修改了代码，因为我认为它需要比较DOM元素，而不是jQuery对象。 - jfriend00

Answer 2

尝试

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

---

注意,

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

.not( selector ) 版本添加：1.0

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

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

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

.not( selection )版本新增：1.4

选择器类型：jQuery，一个现有的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>

- guest271314

---

嗯，对于顶部集合看起来工作得很好，但是如果我尝试从第二个集合获取添加按钮，就像这样：http://jsfiddle.net/47wc5L96/25/ --- 抱歉 :p - Alain Tiemblo

@AlainTiemblo 顶级集合可能是一个有趣的过滤器，因为它包含具有相同类的嵌套集合；需要删除具有父容器类的非选定元素。嵌套的内部集合可以相对直接地选择 http://jsfiddle.net/47wc5L96/26/ - guest271314

我知道，但那不是真的，因为我不知道我可以有多少个嵌套集合。想象一下，我有一个表单描述了一个REST响应，让用户在3个字段之间进行选择：键、值和节点，其中节点可以包含任意数量的嵌套键/值/节点。我们可以想象响应会比2个元素更深入。顺便说一句，不用担心，在jQuery中做这个太复杂了（我花了一整天的时间），最终我选择了每个集合的不同按钮类前缀。感谢您的时间！ - Alain Tiemblo