Question

Inside “myFunction”, I have an each() iterator which finds the height of certain elements. How can I assign each height value to an incrementally generated variable name, accessible outside the each loop?

function myFunction(){

    $('#div1, #div2 ... #divN').each(function(index){
        /* Increment variable name here */ = $(this).outerHeight();
    });

    // Also use those variables here

};

Thanks.

Answer 1

This task is better solved with an array, and thanks to jQuery’s built-in methods, you can easily extract certain values from a set of elements to an array:

var heights = $('#div1, #div2 ... #divN').map(function(){
    return $(this).outerHeight();
}).get();
// `heights` is an array and
// heights[0] = height of first element in the tree
// heights[1] = height of second element in the tree
// ...

I have to stress that the order of the heights array is not the order in which you put the elements in the selector! jQuery will always reorder the elements to how they are positioned in the DOM.

Reference: .map, .get

---

If you want the height somehow associated to something which can identify the element, you can use an object where the keys are the element IDs and the values are the heights:

var heights = {};
$('#div1, #div2 ... #divN').each(function(){
    heights[this.id] = $(this).outerHeight();
});
// `heights` is an object and
// heights['div1'] = height of element with ID div1
// heights['div2'] = height of element with ID div2
// ...