Jquery .css('top') returns undefined

Question

Here's a quick rundown on how my app is built:

Elements are created dynamically. All the elements are draggable and resizable. I've created a function that runs when a button is clicked. Here is the function:

$( '#save_canvas' ).click( function(e){
      var _tmpArray = [];  //Temp Array
      var i = 0;

      $( '#canvas' ).children('.elem').each(
      //$('.elem').each(
         function(){
            _tmpArray = [];   //Temp Array
            _id = $(this).attr('id');

            _top = $( '#' + _id ).css('top');
            _left = $( '#' + _id ).css('left');
            _height = $( '#' + _id ).css('height');
            _width = $( '#' + _id ).css('width');
            _tmpArray[0]   = _id;
            _tmpArray[1]   = _height;
            _tmpArray[2]   = _width;
            _tmpArray[3]   = _top;
            _tmpArray[4]   = _left;
         }
      );
   });

The function works perfectly fine for the first element (first child). but not the remaining ones. Here is a document.write output of the array with 3 elements created:

== LEGEND ==
Element Id
Height
Width
Top
Left

textblock_1
50px
150px
262px
100px

textblock_2
undefined
undefined
undefined
undefined

textblock_3
undefined
undefined
undefined
undefined

I've searched far and wide online and cannot figure this one out for the life of me...help please? :)

Answer 1

Do you have IDs set on the subsequent textblocks? You do not need to use "$( '#' + _id )" continuously, just use $(this) all the way.