How to fetch only topest level div with jQuery?

Question

<div id="container">
    <div>
     <div>
     </div>
    </div>
    <div>
     <div>
     </div>
    </div>
    <div>
     <div>
     </div>
    </div>
</div>

$('#container').find('div') will also include those inner divs.

How to fetch only the 3 top level divs?

Answer 1

Select only the direct descendants with the parent > child selector:

$('#container > div')

Or the Traversing/children function:

$('#container').children('div')

Answer 2

You can use jQuery's children([expr]) function to do this.

Something like

$("#container").children("div")