使用 jQuery 获取不是具有特定 CSS 类的容器的子元素的元素的后代

Posted 2023-03-05

【中文标题】使用 jQuery 获取不是具有特定 CSS 类的容器的子元素的元素的后代

【英文标题】：Use jQuery to get descendants of an element that are not children of a container with a certain CSS class

【发布时间】：2012-01-04 05:43:08

【问题描述】：

我有一种情况，我需要选择某个元素的所有后代，但 排除 那些是容器的子代，该容器等于我运行选择器的容器的 CSS 类。

相当复杂的描述。

<div class="container">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
   <div class="element">
       <div class="container">
           <div class="element"></div>
           <div class="element"></div>
           <div class="element"></div>
       </div>
   </div>

在最外层的 DIV 上运行 jQuery .find('.element') 会得到所有的 DIV，甚至是第二个容器内的 DIV。这是我尽量避免的。

是否有针对这种情况的快速简单的 jQuery 选择器解决方案？

【问题讨论】：

你能指出我要选择哪些元素吗？

在这种情况下，级别 1 的 4 个 DIV 具有“元素”类

【参考方案1】：

我认为您要使用的是not 选择器。像这样..

$(".container").not(".container .container")

或者，您可以使用children 选择器从一层深处获取孩子。这将排除嵌套的 div。

为了更明确一点，我认为在使用“find”之后，您会想要使用 not 选择器。像这样：

$(".container").find(".element").not($(".container .container .element"))

您可以将函数传递给 not，因此您可以让该函数查看每个匹配元素的父元素，以查看它是否嵌套在具有相同类的元素内。

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) 
    // this is the corrent DOM element
    var $this = $(this),
        return_value = false;

    $.each($this.attr('class').split(/\s+/), function(index) 
        if ($this.parents("." + this).length > 0) 
            return_value = default_value || true;
        
    );

    return return_value;



$(".container").find(".element").not(removeIfNested);

如果您可以向嵌套容器添加一个类，那将是理想的，那么它只是：

$(".container").find(".element").not($(".nested .element"))

假设您将“嵌套”类添加到您的内部容器 div。

【讨论】：

很高兴知道！在我的特殊情况下， children() 更合适。但是非常感谢你让我注意到 not()。无论如何，children() 完成了这项工作。直到我想出一个要支持多个级别的案例。

我发现我遇到了 DIV 再次嵌套在容器中的情况，这就是我不得不转储 children() 的原因。使用 not() 似乎是个好主意，但问题是：使用什么选择器与 not() 匹配父容器（不是直接匹配子容器）？

感谢您的提示。我尝试应用它，但没有这样做。我发现如果我只是对所有后代容器应用一个额外的 CSS 类可能会更容易，这样我就可以轻松地排除它们。但是现在我似乎没有找到使用什么选择器来通过使用 .find() 选择所有 .container DIV 并排除所有属于具有特定 css 类的元素的子元素的元素。 - 你更快。让我尝试应用您的最新解决方案。

就是这样。一旦我应用了您的最终建议并在 not() 语句中的父类名称和子类名称之间添加了一个 >，它就起作用了。 .not($('.canHaveChildren > .element')) - 谢谢！你拯救了我的一天。

在 find 语法之后应用 .not($(".nested .element")) 有助于解决我在 find all 后过滤的需要：$(".container").find("* ").not($(".element"))

【参考方案2】：

对于您的具体示例，这将起作用 -

$("body > div.container > .element")

这只会获得***元素 div。如果您的元素集合采用不同的结构，您可以将 body 替换为集合的容器 ID。

演示 - http://jsfiddle.net/QAP37/

【讨论】：

我不能应用这个解决方案，因为即使上面描述的例子被简化了，实际情况有点复杂。不过谢谢。

【参考方案3】：

你可以像这样使用 jquery 选择器：

find('*:not(.container .container *)')

【讨论】：

发件人：api.jquery.com/all-selector .... 注意：所有或通用选择器非常慢，除非单独使用。 让您知道...

【参考方案4】：

我发现以下内容比所选答案更简洁、更笼统。它适用于任意深度嵌套的树：

function getNonNestedElements(container, elementSelector, containerSelector) 
  return container.find(elementSelector).not(function(index) 
    var nearest = $(this).closest(containerSelector);
    return nearest[0] !== container[0];
  );

地点：

container 是根“容器”div 的 jQuery 对象 elementSelector 是元素的 jQuery 选择器，在本例中为 .element containerSelector 是容器的 jQuery 选择器，在本例中为 .container

所以这会找到初始容器下的所有元素，然后为每个元素检查其最近的容器是初始容器还是其他嵌套容器。如果它最近的容器是嵌套容器，它将把它扔掉，所以你只剩下不在另一个容器内的后代。

对于重复多元素嵌套表单字段等事情非常方便。