Jquery 选择器不包含和节点（或其 children）具有特定 class

Question

我有一个元素 (div)，它的 children 中也有一个 class。我需要一个选择器，它可以找到主要元素及其所有 children，但不包括具有相同 class（或其 children）的任何 children。

我需要一个给我根的选择器，以及任何没有“child”的后代 class.

<div class="foo child">
  <div class="foo child">
    I don’t want this or any child.
    <div class="foo">
      I don’t want this either.
    </div>
  </div>
  <div class="foo">
   I do want this and any children.
  </div>
</div>

我在 :not 上尝试过各种尝试，但没有找到有效的方法。

具体原因。我正在使用 jquery.resizable 并且我正在调整大小的元素是一个包含一些 children 元素的组，这些元素也具有 class “可调整大小”。在调整 parent 的大小时，我不想同时调整 children 的大小时 - 这是正在发生的事情，因为 class 也存在于 children 中.

TIA，威尔

Answer 1

试试这个：

$(".foo:not(.foo .foo.child,.foo .foo.child *)")

.foo 匹配所有 class="foo"。 .foo .foo.child 匹配另一个 class="foo" 中包含的任何 class="foo child"，.foo .foo.child * 匹配它的所有后代。

Answer 2

我认为没有比从所有 .child 和 .child 后代中 filter 剔除具有 .child 祖先的方法更好的方法了。

$( '.child, .child *' ) // all .child and their descendants
  .filter( (i,el) =>
    // remove the .child that have a .child parent (".child .child")
    // and their descendants (".child .child *")
    !$( el ).is( '.child .child, .child .child *' )
  )
  .addClass( 'green' );

* { color: red; }
.green { color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="foo child">
  <div class="foo child">
    I don’t want this or any child.
    <div class="foo">
      I don’t want this either.
    </div>
  </div>
  <div class="foo">
   I do want this and <span>any children.</span>
  </div>
  And even this
</div>

并且由于它显然是在调整大小事件中使用的，所以在你的位置我会把这个选择保存在一个可重用的变量中，这样它就不会执行太多次。

Jquery 选择器不包含和节点（或其 children）具有特定 class

Jquery selector that does not include and node(or its children) with specific class

jquery

jquery-ui