How do I select these children divs

Question

I'm trying to alert the ids of each of these divs so it output 11 25 78 .

<div id="main">
  <div id="section-11">Some content</div>
  <div id="section-25">Some content</div>
  <div id="section-78">Some content</div>
</div>

I've already selected main and I'm trying to use children but it's not working. Not sure why.

$('#main').children().each(function(){
   alert($(this).attr('id'));
});

Answer 1

$('#main div').each(function() {
    alert($(this).attr('id').replace(/section-/, ''));
});

Answer 2

This works fine for me:

http://jsfiddle.net/mfgXG/

Are you forgetting to run after on ready?

Answer 3

It does work at least in FF. Have a look there at this JSFiddle

Answer 4

I guess there are more nested div elements there, ie those "section" elements are not direct children of the main panel?

In such case, have such selector:

$('#main div[id^="section-"]').each(function(){

To find all matching elements.