Jquery .css('top') returns undefined

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? :)

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

Thanks a lot everyone for the help in finding the issue with this piece of code!

Ends up the issue was partly because of the way I was calling the elements - I'll have to figure out why still - but also because I had to use .height() and .width():

_top = $( this ).css('top');
_left = $( this ).css('left');
_height = $( this ).height();
_width = $( this ).width();

Once again, Thanks! :)