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

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

本文关键字：选择器 元素 何查找 查找      更新时间：2024-06-29

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

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

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

我实现了min和max选项，因此添加和移除加按钮？

为了简化问题，请查看以下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，但不能再选择？

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

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

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

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

尝试

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

注意，

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

.not（选择器）版本已添加：1.0

选择器类型：selector或Element或Array包含选择器表达式、DOM元素或要匹配的元素数组对布景。

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

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

.not（选择）版本添加：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>

相关文章：