Question

我有一种情况需要选择某个元素的所有后代，但是排除那些容器的子元素，它等于我运行选择器的容器的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选择器解决方案？

Answer 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。

Answer 2

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

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

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

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

Answer 3

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

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

Answer 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是元素.element的jQuery选择器
containerSelector是容器的jQuery选择器，在这种情况下为.container

因此，这将找到初始容器下方的所有元素，然后针对每个元素检查其最近的容器是初始容器还是其他嵌套容器。如果其最近的容器是嵌套容器，则会将其丢弃，因此您只剩下不在另一个容器内的后代。

非常方便处理重复的多元素嵌套表单字段。

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

4 个答案: