jquery选择不嵌套在孩子中的孩子答案

【问题标题】：jquery selecting children not nested in a childjquery选择不嵌套在孩子中的孩子
【发布时间】：2012-12-13 20:54:01
【问题描述】：

我在使用 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);

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

谢谢。

【问题讨论】：

$(".subContainer:first", container) $(".subContainer", container).first() 可能会起作用。
复制：stackoverflow.com/questions/12624058/…
这不是完全重复的。这个问题需要一个子元素，避免嵌套。另一个问题想要一个兄弟/侄子元素，避免任何子元素。

标签： javascript jquery html jquery-selectors

【解决方案1】：

你可以使用direct child选择器：

$("> .subContainer", container);

如果container 是一个引用顶级.container 元素的jQuery 对象，您也可以使用children 方法：

container.children('.subContainer');

或find 和first 方法：

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

【讨论】：

这不起作用，因为 .subContainer 不是直接子级。 (...) 可能包含许多 div。
这些方法在所有情况下都不起作用。如果主 .subContainer 的第一个子级是一个 .subContainer 的 div 有一个 .container 的子级 div 怎么办？
本页末尾有解决问题的方法（已接受 awnser）

【解决方案2】：

基于Jquery: Get all elements of a class that are not decendents of an element with the same class name?，我开发了以下解决方案。谢谢大家。

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

【讨论】：

优秀的解决方案。我建议将方法重命名为$.fn.findButNotNested，因为这就是它的作用（另一个答案是不在里面）。（我试图编辑，但被拒绝了。）

【解决方案3】：

要获取您可以使用的第一个子容器

$('.subContainer')[0]

【讨论】：

这仍将包括所有嵌套和子嵌套的子容器。
这不起作用。如果主 .subContainer 的第一个子级是一个 .subContainer 的 div 有一个 .container 的子级 div 怎么办？

【解决方案4】：

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

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

这仅返回 #outer div。

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

【讨论】：