CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
NotGaeL
NotGaeL

Reputation: 8504

jQuery select all nodes of a class but those in the current DOM branch

I have a series of divs of class "foo" randomly nested. Using jQuery, I want to select all divs not in the ascending branch of a node.

E.g. In the following structure, if the node considered is "1_1_1", the operation would select all "foo" divs except parent "bar1_1" and parent of parent "bar1":

<div class="foo" id="bar1">
  ...
  <div class="foo" id="bar1_1">
    ...
    <div class="foo" id="bar1_1_1">
      ...
      <div class="foo" id="bar1_1_1_1">
        ...
      </div>
      ...
    </div>
    ...
    <div class="foo" id="bar1_1_2">
      ...
      <div class="foo" id="bar1_1_2_1">
        ...
      </div>
      ...
    </div>
    ...
  </div>
  ...
</div>
...
<div class="foo" id="bar2">
  ...
  <div class="foo" id="bar2_1">
    ...
  </div>
  ...
  <div class="foo" id="bar2_2">
    ...
  </div>
  ...
</div>
...

(Note the ids reflecting the position of the node in the tree is just for exemplification. The actual nodes don't even have ids.)

One solution would be to select all nodes, then remove the considered node and all its ascendants from the selection, but I don't know how to do that last part. Any ideas?

Upvotes: 1

Views: 305

Answers (1)

Tetaxa
Tetaxa

Reputation: 4403

Check out http://api.jquery.com/not/ or http://api.jquery.com/not-selector/ I don't know about performance, but either should do the trick combined with :has()

$('.foo:not(:has(#bar1_1_1))').css('background','pink');

http://jsfiddle.net/d1492pcf/

Upvotes: 2

Related Questions