How to get only first level divs?

Question

I have a div with an id of content and I want to get the id of the first level div elements, eg. box1, box2, box3. How can this be done ?

<div id="content">
    <div id="box1" class="box1class">
        <div>...</div>
    </div>
    <div id="box2" class="box1class">
        <div>...</div>
    </div>
    <div id="box3" class="box1class">
        <div>...</div>
    </div>
</div>

Answer 1

Use the > child seelctor.

var ids = [];
$("#content > div").each(function() {
    ids.push(this.id);
});

You could shorten this further by using map():

var ids = $("#content > div").map(function() {
    return this.id;
}).get();

Answer 2

$("#content > div")

Like this. You can get array of div's like this

   var array =  $("#content > div").map(function(){
       return this.id;
    }).get();

See in jsfiddle http://jsfiddle.net/DsyzV/

Answer 3

Use:

$("#content > div").each(function() {
  var divId = this.id;
});