javascript - jquery 选择未嵌套在子项中的子项

Question

我在使用 jQuery 选择器时遇到了一些问题。

假设我有以下 html，其中 (...) 代表未定义数量的 html 标签。

(...)
<div class="container">
  (...)
    <div class="subContainer">
      (...)
        <div class="container">
          (...)
            <div class="subContainer"/>
          (...)
        </div>
       (...)
     </div>
   (...)
</div>
(...)

假设我有一个名为 container 的 javascript 变量，它指向第一个 div(带有容器类)。 我想要一个选择第一个子容器而不是嵌套子容器的 jquery。 如果我使用$(".subContainer", container); 我会得到它们。

我试过

$(".subContainer:not(.container .subContainer)", container);

但这会返回一个空集。 有什么解决办法吗？

谢谢。

Answer 1

您可以使用direct child 选择器:

$("> .subContainer", container);

如果 container 是引用顶级 .container 元素的 jQuery 对象，您还可以使用 children 方法:

container.children('.subContainer');

或者find和first方法:

container.find('.subContainer').first();