blocks|key|250113|text|我认为您要使用的是not选择器。像这样..。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|250114|$(".container").not(".container+.container")|code-block|syntax|javascript|250115|或者，您可以使用children选择器从一个级别的深度获取子级。这将排除嵌套的div。|250116|更明确地说，我认为在使用'find‘之后，你会想要使用not选择器。如下所示：|250117|$(".container").find(".element").not($(".container+.container+.element"))|250118|您可以将一个函数传递给not，这样您就可以让该函数查看每个元素的父元素是否匹配，以查看它是否嵌套在具有相同类的元素中。|250119|http://jsfiddle.net/QXfs2/6/|250120|removeIfNested+=+function(index)+{
++++//+this+is+the+corrent+DOM+element
++++var+$this+=+$(this),
++++++++return_value+=+false;

++++$.each($this.attr('class').split(/\s%2B/),+function(index)+{
++++++++if+($this.parents("."+%2B+this).length+>+0)+{
++++++++++++return_value+=+default_value+%7C%7C+true;
++++++++}
++++});

++++return+return_value;
}


$(".container").find(".element").not(removeIfNested);|250121|如果您可以向嵌套容器添加一个类，那么这将是理想的，那么它只是：|250122|$(".container").find(".element").not($(".nested+.element"))|250123|假设你将类“嵌套”添加到你的内部容器div中。|250124|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/not/|1|http://api.jquery.com/children/|2^0|9|3|0|0|0|8|8|1|0|0|0|0|0|S|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|D|3|E|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|K|3|L|5|6|7|1K|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|1L|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|S|3|T|5|F|7|1R|8|@]|9|@]|C|$G|H]]|$1|U|3|V|5|6|7|1S|8|@]|9|@]|C|$]]|$1|W|3|X|5|F|7|1T|8|@]|9|@]|C|$G|H]]|$1|Y|3|Z|5|6|7|1U|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1V|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]|1A|$5|13|14|15|C|$16|R]]]]

I think what you want to use is the <a href="http://api.jquery.com/not/">not</a> selector. Like this..

<pre><code>$(".container").not(".container .container")
</code></pre>

Alternately, you could use the <a href="http://api.jquery.com/children/">children</a> selector, to get the children from one level deep. Which would exlclude the nested divs.

To be a little more explicit, I think you'll want to use the not selector after you use the 'find'. Like this:

<pre><code>$(".container").find(".element").not($(".container .container .element"))
</code></pre>

You can pass a function to not, so you could have that function look at the parents of each element match to see if it is nested inside of an element with the same class.

<a href="http://jsfiddle.net/QXfs2/6/">http://jsfiddle.net/QXfs2/6/</a>

<pre><code>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 &gt; 0) {
 return_value = default_value || true;
 }
 });

 return return_value;
}


$(".container").find(".element").not(removeIfNested);
</code></pre>

If you could add a class to the nested container, that would be ideal, then it's just:

<pre><code>$(".container").find(".element").not($(".nested .element"))
</code></pre>

Assuming you added the class "nested", to your inner container div.

blocks|key|2923884|text|对于您的特定示例，这将是可行的-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2923885|$("body+>+div.container+>+.element")|code-block|syntax|javascript|2923886|这将只获得顶级元素div。如果你的元素集合在一个不同的结构中，你可以用集合的容器id替换body。|offset|length|style|CODE|2923887|演示-+http://jsfiddle.net/QAP37/|2923888|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QAP37/^0|0|0|18|4|0|4|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

For your specific example this would work -

<pre><code>$("body &gt; div.container &gt; .element")
</code></pre>

That will only get the top level element divs. If your element collection was in a different structure you could substitue <code>body</code> with the collection's container id. 

Demo - <a href="http://jsfiddle.net/QAP37/" rel="nofollow">http://jsfiddle.net/QAP37/</a>

blocks|key|3138027|text|您可以像这样使用jquery选择器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3138028|find('*:not(.container+.container+*)')|code-block|syntax|javascript|3138029|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use jquery selector like this: 

<pre><code>find('*:not(.container .container *)')
</code></pre>

blocks|key|3138052|text|我发现下面的答案比所选的答案更简洁和通用。它适用于任意深度嵌套的树：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3138053|function+getNonNestedElements(container,+elementSelector,+containerSelector)+{
++return+container.find(elementSelector).not(function(index)+{
++++var+nearest+=+$(this).closest(containerSelector);
++++return+nearest[0]+!==+container[0];
++});
}|code-block|syntax|javascript|3138054|其中：|3138055|3138056|container是根“容器”的jQuery对象，div|unordered-list-item|offset|length|style|CODE|3138057|elementSelector是元素的jQuery选择器，此case|3138058|containerSelector中的.element是容器的jQuery选择器，在本例中为.container+|3138059|3138060|因此，这将查找初始容器下的所有元素，然后对于每个元素，检查其最近的容器是初始容器还是其他嵌套容器。如果它最近的容器是一个嵌套的容器，它会把它抛出，所以你只剩下不在另一个容器中的子代。|3138061|对于重复多元素、嵌套表单域之类的事情非常方便。|3138062|entityMap^0|0|0|0|0|0|9|0|0|F|0|0|H|J|8|1A|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@$M|16|N|17|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|18|8|@$M|19|N|1A|O|P]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1B|8|@$M|1C|N|1D|O|P]|$M|1E|N|1F|O|P]|$M|1G|N|1H|O|P]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|10|$]]

I found the following slightly more succinct and general than the selected answer. It works with arbitrarily deeply nested trees:

<pre><code>function getNonNestedElements(container, elementSelector, containerSelector) {
 return container.find(elementSelector).not(function(index) {
 var nearest = $(this).closest(containerSelector);
 return nearest[0] !== container[0];
 });
}
</code></pre>

where:

<ul>
<li><code>container</code> is the jQuery object for the root "container" div</li>
<li><code>elementSelector</code> is the jQuery selector for the element, <code>.element</code> in this case</li>
<li><code>containerSelector</code> is the jQuery selector for the container, <code>.container</code> in this case</li>
</ul>

So this finds all the elements beneath the initial container, then for each element checks to see if its nearest container is the initial container or some other nested container. If its nearest container is a nested container, it throws it out, so you are just left with descendants which are not inside another container. 

Very handy for things like repeating multi-element, nested form fields.

I have a situation in which i need to select all descendants of a certain element, but exclude those that are children of a container that equals the CSS class of the container i run my selector on.

Pretty complicated description.

<pre><code>&lt;div class="container"&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;div class="element"&gt;
 &lt;div class="container"&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;div class="element"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>



Running a jQuery .find('.element') on the outermost DIV will get me all the DIVs, even the ones inside the second container. That is what i try to avoid.

Is there a quick and simple jQuery selector solution for this case?

Use jQuery to get descendants of an element that are not children of a container with a certain CSS class

容器

jQuery

我有这样一种情况，我需要选择某个元素的所有子元素，但是排除了那些与运行选择器的容器的CSS类相同的容器的子元素。相当复杂的描述。<div class="container"> <div class="element"></div> <div class="element"></div> <div class...

问使用jQuery获取某个元素的子元素，该元素不是具有某个CSS类的容器的子项。
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取某个元素的子元素，该元素不是具有某个CSS类的容器的子项。EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取某个元素的子元素，该元素不是具有某个CSS类的容器的子项。
EN