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

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（“元素”）会让我所有的DIV，甚至第二容器内的人。这是我尽量避免的。

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

Answer 1

我想你想使用的是not选择器。这样的..

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

或者，你可以使用children选择，从深一个层次得到了孩子们。这将包括嵌套的div。

为了更清楚一点，我想你会想在使用'find'后使用非选择器。就像这样：

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

您可以通过一个功能没有，所以你可以有功能看看每个元素匹配的父母，看它是否被嵌套在同一类的元素中。

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。如果您的元素集合处于不同的结构中，您可以使用集合的容器标识代替body。

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

Answer 3

您可以使用jQuery选择这样的：

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