jquery选择没有嵌套在孩子身上的孩子

I have some problems with a jQuery selector.

我有一个jQuery选择器的问题。

Let's say I have the following html where (...) stands for an undefined number of html tags.

假设我有以下html，其中（...）代表未定义数量的html标签。

(...)
<div class="container">
  (...)
    <div class="subContainer">
      (...)
        <div class="container">
          (...)
            <div class="subContainer"/>
          (...)
        </div>
       (...)
     </div>
   (...)
</div>
(...)

Let say that I have a javascript variable called container that points to the first div (with class container). I want a jquery that selects the first subcontainer but not the nested one. If I use$(".subContainer", container); I'll get both of them.

假设我有一个名为container的javascript变量，它指向第一个div（带有类容器）。我想要一个jquery来选择第一个子容器而不是嵌套的子容器。如果我使用$（“。subContainer”，容器）;我会得到他们两个。

I've tried using

我试过用过

$(".subContainer:not(.container .subContainer)", container);

but this returns an empty set. Any solution?

但这会返回一个空集。有解决方案吗

Thanks.

谢谢。

4 个解决方案

#1

You can use direct child selector:

您可以使用直接子选择器：

$("> .subContainer", container);

If container is a jQuery object that refers to top-level .container element you can also use children method:

如果container是引用*.container元素的jQuery对象，您还可以使用children方法：

container.children('.subContainer');

Or find and first methods:

或者找到第一种方法：

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

#2

Based on Jquery: Get all elements of a class that are not decendents of an element with the same class name? I've developed the following solution. Thanks to all.

基于Jquery：获取一个类的所有元素，这些元素不是具有相同类名的元素的后代？我开发了以下解决方案。谢谢大家。

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

#3

To get the first subContainer you can use

要获得第一个subContainer，您可以使用

$('.subContainer')[0]

#4

This seems to work for my own uses...

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

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

This returns only the #outer div.

这只返回#outer div。

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

#1