create multidimensional array or object in jquery each loop

Question

this is what I've got and been struggeling for hours. if I alert(i)in the each loop it gives me 1,2,3... but if I want to use as as key for a multidimensional array it is like a string "i"

$(document).ready(function(){
    var positions=[];

    $( ".box" ).each(function(i) {
        //alert(i);
        var elPositions = {};
        elPositions.i = $(this).offset().top;
        positions.push(elPositions);
        //$elPosArray[i] = $(this).offset().top;
        //$(this).html('outer height--> ' + $(this).outerHeight(true));
    });
    console.log(positions);
    //console.log(el);
});

There are Questions and answers to this topic but none of them helped me to get this to work.

I would like to get an array or obj looking something like:

   positions[0]['offset'] = '120';
   positions[0]['height'] = '300';
   positions[1]['offset'] = '420';
   positions[1]['height'] = '180';
   positions[2]['offset'] = '600';
   positions[2]['height'] = '100';
   positions[3]['offset'] = '700';
   positions[3]['height'] = '300';

Here is a fiddle with the html http://jsfiddle.net/Z9WrG/

Answer 1

You're pretty much there!

In your loop, elPositions (here renamed data) is recreated new on each iteration, and then pushed into the array with a consecutive index. There's no need to specify i in the data object as i is assigned automatically when you push into the array.

See updated fiddle: http://jsfiddle.net/Z9WrG/2/

and code:

$(document).ready(function(){
    var positions=[];

    $( ".box" ).each(function() {
        var $this = $(this);
        var data = {};

        data.offset = $this.offset().top;
        data.height = $this.height();

        positions.push(data);
        // Now, positions[iteration_index] = { offset: x, height: y }
    });

    console.log(positions);
    console.log(positions[0].height);
    console.log(positions[0].offset);
});