I have some problems with a jQuery selector.

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

(...)
<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.

I've tried using

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

but this returns an empty set. Any solution?

Thanks.

I have some problems with a jQuery selector.

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

(...)
<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.

I've tried using

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

but this returns an empty set. Any solution?

Thanks.

• javascript
• jquery
• html
• jquery-selectors

• $(".subContainer:first", container) $(".subContainer", container).first() might work. – rlemon Commented Dec 28, 2012 at 15:56
• 1 Duplicate: stackoverflow.com/questions/12624058/… – N Rohler Commented Dec 28, 2012 at 16:01
• It's not quite a duplicate. This question wants a child element, avoiding nested ones. The other question wants a sibling/nephew element, avoiding any child elements. – goodeye Commented Oct 19, 2013 at 22:42

4 Answers 4

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.children('.subContainer');

Or find and first methods:

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

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.

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

To get the first subContainer you can use

$('.subContainer')[0]

This seems to work for my own uses...

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

This returns only the #outer div.

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