javascript - jquery选择不嵌套在孩子中的孩子

Question

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

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

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

假设我有一个名为的 javascript 变量container，它指向第一个 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();

Answer 2

基于Jquery：获取一个类的所有元素，这些元素不是具有相同类名的元素的后代？我开发了以下解决方案。谢谢大家。

$.fn.findButNotNested = function(selector, notInSelector) {
    var origElement = $(this);
    return origElement.find(selector).filter(function() {
        return origElement[0] == $(this).closest(notInSelector)[0];
    });
};

Answer 3

要获得第一个子容器，您可以使用

$('.subContainer')[0]

Answer 4

这似乎适用于我自己的用途......

$('.item').filter(function() { return $(this).parents('.item').length == 0; });

这仅返回#outerdiv。

<div class="item" id="outer">
    <div class="item" id="inner"></div>
</div>