d3 selector for immediate children

Question

I can obviously do this:

d3.selectAll('div#some-div>ul') 

But what if I'm using a DOM node or existing D3 selection:

d3.select(this).selectAll('ul') 

will get me all descendent ULs. So, if

var div = d3.select('div')  

got me this node:

<div>   <ul>     <li>foo       <ul><li>bar</li></ul>     </li>   <ul> </div> 

Then

var uls = div.selectAll('ul')  

will get me two ULs. I guess I could distinguish a top level one like:

uls.filter(function() { return this.parentNode === div.node() } 

So, I've answered my own question. Maybe it will be useful to someone. Or maybe someone can recommend a less ugly solution.

Even better, Alain Dumesny, whose answer below is belatedly selected as correct, posted this as an issue to D3 and got the problem fixed, kludge-free, at the source! (I would copy it in here for convenience, but then people might not scroll down and cast greatly deserved upvotes for his heroic feat.)

Answer 1

I wouldn't have expected this to work, but it looks like D3 will sub-select any element that is a child of the selection and matches the selector - so this works:

d3.select(this).selectAll('div > ul'); 

See http://jsfiddle.net/g3aay/2/