JQuery search is recursive but ignoring some elements

Question

Assume the following HTML

<div id=main> <div id=a></div> <div id=b></div> <div id=c></div> <div id=d> <div id=d1 class="no"> <div id=d11></div> <div id=d12></div> </div> </div> <div id=e> <div id=e1 class="no"> <div id=e11></div> <div id=e12></div> <div id=e13></div> </div> </div> </div> 

I want to select all div tags that are children, but don’t want to ignore the children of divs that have the class as no.

Currently, I have written a recursive function to do the job. But it was interesting if there is a jQuery selector to get what I want.

I want a DIV with identifiers a, b, c, d, d1, e, e1

thanks

EDIT : a test page was created here - http://jsfiddle.net/mRENV/

Answer 1

In one selector, without further workaround, you can do this: $('#main div:not(div.no > div)');

Answer 2

It should be:

 $('#main div').not('.no div') 

Btw. the term "children" refers only to the direct descendants of an element. You want to get all descendants (not just children) #main .

Link: .not()

Edit: Updated demo to work correctly: http://jsfiddle.net/fkling/mRENV/1/

Answer 3

A few syntactic ways to achieve this using jQuery, my suggestion is:

 var $result = $('#main').find('div:not(.no > div)'); 

Calling .find() ^help along with the pseudo :not() ^help . This line is equivalent to:

 var $result = $('#main').find('div').not('.no > div'); 

while the latter may be slightly faster.