How can I filter out a subtree and then search in jQuery?

Question

Given $('#test') and the following DOM, how can I select the corresponding ted-collapse?

<div id='test' class='ted-panel'>
  <div class='ted-collapse'></div>

  <div class='ted-panel'>
    <div class='ted-collapse'></div>
    <div class='ted-collapse'></div>
    <div class='ted-collapse'></div>
  </div>
</div>

Notes:

The corresponding .ted-collapse is the element that's a child of the current .ted-panel and not a child of any nested .ted-panel
.ted-collapse is not guaranteed to be an immediate child of .ted-panel

Essentially, I want to (1) filter out any children .ted-panels, then (2) .find('.ted-collapse).

Here's a one-line solution based on one of the comments:

$('#test').not($('#test').find('.ted-collapse'))

`$('#test .ted-collapse').not('#test>.ted-panel .ted-collapse')`??? — Bhojendra Rauniyar, Dec 16 '14 at 21:52
It just seems like you really have no idea what the markup will look like, and adding the same classes over and over, and then not being able to use them, seems silly ! — adeneo, Dec 16 '14 at 21:53
Is that what you want? http://stackoverflow.com/a/24314604/2324107 — Karl-André Gagnon, Dec 16 '14 at 21:57
@SamSelikoff here in action : http://jsbin.com/xelitoteva/1/edit?html,js,output — Karl-André Gagnon, Dec 16 '14 at 22:02
@SamSelikoff if that was really your problem, tell me and i'll close it as duplicated. — Karl-André Gagnon, Dec 16 '14 at 22:03
@Karl-AndréGagnon I suppose it is the same, though I searched and couldn't find it. I was looking for "skip subtree" — Sam Selikoff, Dec 16 '14 at 22:06
@SamSelikoff Yeah, it is not a "popular question", that's why it doesn't always show in your such. But marking them as duplicated help referencing 1 question instead of X numbers. Well, glad it helped you! — Karl-André Gagnon, Dec 16 '14 at 22:08
if `$('#test').not($('#test').find('.ted-collapse'))` is what you're after, I'm completely lost ? — adeneo, Dec 16 '14 at 22:10
@adeneo it's actually `$('#test').find('.ted-collapse').not($('#test').find('.ted-panel').find('.ted-collapse'));` (where of course `$('#test')` is cached) — Karl-André Gagnon, Dec 16 '14 at 22:13
That's the same as `$('#test .ted-collapse').not('.ted-panel .ted-panel .ted-collapse')`, which was my first suggestion ? — adeneo, Dec 16 '14 at 22:15
@adeneo kind of, except that yours work when the target is at the root of the tree, but it seems like OP want to target on different level, the element might not always be in the first `.ted-panel`. (just a guess). — Karl-André Gagnon, Dec 16 '14 at 22:18
@Karl-AndréGagnon - well, I give up anyway, he claims `$('#test').not($('#test').find('.ted-collapse'))` is working in the edited question, and if it does, I've completely misunderstood the question ! — adeneo, Dec 16 '14 at 22:20
@adeneo huh, yeah, didn't see that. A mystery to me as well... — Karl-André Gagnon, Dec 16 '14 at 22:22

Bhojendra Rauniyar · Answer 1 · 2014-12-16T22:18:39.177

1

You can go this way too:

$('.ted-panel .ted-collapse:not(#test.ted-panel .ted-panel .ted-collapse)')

working demo

edited Dec 16 '14 at 22:18

answered Dec 16 '14 at 22:04

Bhojendra Rauniyar

83,432
35
168
231

That would not work, it will get all `.ted-collapse`. It is not because you exclude the parent from you selector that it will exclude the children. – Karl-André Gagnon Dec 16 '14 at 22:11
I think now it's as OP wanted... – Bhojendra Rauniyar Dec 16 '14 at 22:22

score 0 · Answer 2 · answered Dec 16 '14 at 21:55

0

Use the > selector

The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected.

$('#test > .ted-collapse')

answered Dec 16 '14 at 21:55

Scott Murphy

448
2
12

1

.ted-collapse is not guaranteed to be an immediate child of .ted-panel – Bhojendra Rauniyar Dec 16 '14 at 21:56
I took that to mean that it might come after ted-panel in the dom but still be a child of #test – Scott Murphy Dec 16 '14 at 22:01
@ScottMurphy no, sry if wasn't clear. Not necessarily immediate child of #test either. – Sam Selikoff Dec 16 '14 at 22:01

Jeromy French · Answer 3 · 2014-12-16T22:12:59.670

0

Get #test, find elements classed as .ted-collapse, but exclude elements that are direct children of elements that are direct children of #test:

$('#test').find('.ted-collapse:not(#test > .ted-panel .ted-collapse)');

Or, if #test isn't the right initial selector, maybe

$('div.ted-panel:first-child').find('.ted-collapse:not(div.ted-panel:first-child > .ted-panel .ted-collapse)');

See http://jsfiddle.net/jhfrench/gzjvsyb3/ for working examples.

edited Dec 16 '14 at 22:12

answered Dec 16 '14 at 22:01

Jeromy French

11,812
19
76
129

prob is it's not always #test..although I think there will always be an id. So this might work. – Sam Selikoff Dec 16 '14 at 22:02
I added a variation of the selector to the jsFiddle. – Jeromy French Dec 16 '14 at 22:12

How can I filter out a subtree and then search in jQuery?

3 Answers3