Jquery :first selector and fadeIn(), child divs not coming along for the ride

Question

I have a page I am working on and am trying to fadeIn and fadeOut specific divs. However, when I fade in a div using the :first selector, I only get the parent div and none of it's children.

Javascript (Jquery):

$(document).ready(function () {
                setupLeftMenu(); //creates nav menu
                autoHeight(); //auto scales content
                $('.datatable').dataTable(); //creates sortable table, injects divs that are not showing up when 'fadeIn' is used.
                $('#outer div').hide();
                $('.submenu li:first').attr('id','current');
                $('#outer div:first').fadeIn('slow');
                $('.submenu li a').click(function() {
                    var top = $(this);
                    $('#outer div').fadeOut('slow');
                    $('.submenu li').attr('id','');
                    $(this).parent().attr('id','current');
                    $('#' + $(top).attr('name')).fadeIn('slow');

                    }); 
                });

And this is the HTML code I get in return. Notice the display:none on the child divs.

 <div class="dataTables_wrapper" id="example_wrapper" style="display: block;">
   <div id="example_length" class="dataTables_length" style="display: none;"> 
     <label>Show 
       <select size="1" name="example_length">
         <option value="10" selected="selected">10</option>
         <option value="25">25</option><option value="50">50</option>
         <option value="100">100</option>
       </select>
        entries
     </label>
   </div>
   <div class="dataTables_filter" id="example_filter" style="display: none;">
     <label>Search: 
       <input type="text">
     </label>
   </div>
 </div>

Does this have to do with the child divs being created by the other Javascript code? I looked into the :first-child selector, but that seems to only affect the first child of multiple parents, rather than all the children of the first parent. I also assumed that the children would automatically follow suit. What am I doing wrong here and how should I fix my code so that all of the children of div id="example_wrapper" fadeIn with it? Thanks!

Update

Just wanted to include my revised code now that I got it working. Still some tweaks to be made but the issue of the child divs is fully resolved. As @Ben Felda said, the elements didn't exist yet. What I did was add a callback function to the dataTable function which forced the fadeIn and fadeOut effects and the attribute changes to wait until the divs were fully formed.

$(document).ready(function () {
                setupLeftMenu();
                autoHeight();
                $('#outer div').hide();
                $('.submenu li:first').attr('id','current');
                $('#outer div:first').fadeIn('slow');
                var dbCallBack = $('.submenu a').click(function() {
                                    var top = $(this);
                                    $('#outer div').fadeOut('slow', function() {
                                        $('.submenu li').attr('id','');
                                        $(top).attr('id','current');
                                        $('#' + $(top).attr('name')).fadeIn('slow');
                                    });                         
                                }); 
                $('.datatable').dataTable(dbCallBack);                  
                });

Answer 1

Its hard to say without seeing the other functions, but you may be onto the problem that the elements don't exist yet. Try logging the length property of the element to see if its there.

console.log($('.submenu li:first').length)

Based on your comment, it seems that the element doesn't exist yet. Here is what I would do: Refactor the code based on the callback pattern. In a nutshell, you will need to pull out your click event into a separate function, and pass that function name with the call to build the elements. Very useful pattern!